雪碧图

雪碧图英文全称是CSS Sprite。也有人称为是精灵图。是一种图像合并技术，被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。

雪碧图的原理

把你在网站上会用到的小图标整合到一张单独的图片中，从而减少你的http请求数量。然后在需要用到图片的地方使用background-image和background-position来将你需要的那部分图片定位显示在合适的位置。

雪碧图的特点

作用

• 减少加载网页图片时对服务器的请求次数 把小图标合并在一张图上，不同的位置想要使用都可以直接使用，只需要请求一次就行，减小了服务器压力。
• 提高页面的加载速度 所有的图片合在一张图上的大小一定要比它们合并之前的大小之和要小。这样同样网速的情况下，图片资源下载下来的时间就会越小。因此就可以提高页面的加载速度

这里我们抛出一个问题哈

❓❓❓ 是不是所有的图片都适合放在雪碧图里面呢

我们现在假设一下，如果有个背景图片的大小很大，如果你把它放在雪碧图上，那么它的请求资源就会更大，下载时间更长，用户体验就更差了，所以我们在使用的时候不建议把大的背景图放在雪碧图里面。

缺点

• 不利于维护：后期只要雪碧图里面的某个图片更改，那么整个雪碧图就需要重新制作，重新定位
• 应用麻烦：每次使用的时候都需要精确计算位置，定位到准备的位置才行，有一点误差就不能正常显示
• 使用形式单一，使用雪碧图的话就只能使用一个容器元素，然后设置背景去填充，不能使用img元素

雪碧图的应用

建议将网站的一些icon图标放在精灵图上，因为这些图标的大小很小，基本上变动不大。

<div class='test'>
  <div v-for="(item, index) in list" :key="index" class="bg" :class="item.className">
    <span>{{item.name}}</span>
  </div>
</div>
list: [
  {
    name: '裙子',
    className: 'bg-clothes'
  },
  {
    name: '鞋子',
    className: 'bg-shoes'
  },
  {
    name: '足球',
    className: 'bg-soccer'
  },
  {
    name: '戒指',
    className: 'bg-ring'
  }
]
.test {
  width: 100%;
  height: 100%;
  .bg::before {
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
  }
  .bg-clothes::before {
    background-image: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
    background-position: top left;
  }
  .bg-shoes::before {
    background-image: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
    background-position: 20px left;
  }
  .bg-soccer::before {
    background-image: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
    background-position: 40px left;
  }
  .bg-ring::before {
    background-image: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
    background-position: 60px left;
  }
}