vue项目中利用background-position来部署背景图中的多个小图标

一、需要的效果

UI提供的背景图

二、思路

首先我们的DOM结构是这样的：

因为接受后台给的数据，所以用v-for动态的去生成DOM节点。通过判断columnId的值来选择对应的图标样式

思路就是给div绑定一个动态样式class，分别计算好每个图标的偏移量，写好对应图标的样式，所有图标共用一个公共样式。样式如下：

/小图标样式

//公共样式
.icon-type{
  display: inline-block;
  width: 20px;
  height: 20px;
  // margin-top: 3px;
  // margin-right: 3.3334px;
  vertical-align: middle;
  background-image: url('../assets/information_icon.png');
  background-repeat: no-repeat;
  background-size: 133.3334px auto;
}

// 各个图标的偏移量
.icon-type-axsd {background-position: -4.458px -1.125px;}
.icon-type-ztyc {background-position: -4.458px -83.334px;}
.icon-type-yszb {background-position: -57.792px -1.125px;}
.icon-type-xwlb {background-position: -32.209px -23.334px;}
.icon-type-mrsp {background-position: -105.418px -4.458px;}
.icon-type-jyts {background-position: -31.125px -2.208px;}
.icon-type-wb {background-position: -4.458px -106.668px;}
.icon-type-tgkp {background-position: -57.792px -25.542px;}

这里要注意的点是，计算便宜量的时候，是背景图片相对于div来偏移的，X轴负值即往左，Y轴负值即向上。