一张矢量图使用css来调用矢量图里的N个图标

一张矢量图使用css来调用矢量图里的N个图标

楼主的意思应该是用CSS控制，使几个不同的按钮分别使用同一张背景图里的不同区域来做背景吧？这个技术叫CSS Spirit，具体就是通过background-position属性来定位背景图，示例代码如下：
HTML：




  


  

    
    
    
  

CSS：

body{
  background: #27AFDF;
}
.btnBox{
  list-style: none;
}
.btnBox .btn{
  display: block;
  width: 110px;
  height: 32px;
  background: url("btnBackground.jpg");
  margin-bottom: 20px;
}
.btnBox .btn_1{
  background-position: 0px -74px;
}
.btnBox .btn_2{
  background-position: 0px -114px;
}
.btnBox .btn_3{
  background-position: 0px -154px;
}效果：


示例代码：