CSS雪碧图

     https://juejin.im/post/58eb062861ff4b006b576d9c 

     CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

       基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。

       优点：①减少加载网页图片时对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。方便在任何位置使用，这样不同位置的请求只需要调用一个图片。(因为多个图片需要向服务器请求多次)

②提高页面的加载速度   ③减少鼠标滑过的一些bug

     缺点:①CSS雪碧的最大问题是内存使用    ②影响浏览器的缩放功能   ③拼图维护比较麻烦   ④使CSS的编写变得困难

   注意：排列图片的时候要注意各个图片之间留点空隙，不然使用的时候，会相互覆盖。