使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
显示雪碧图的条件：
1）需要一个设置好宽和高的容器
2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。
在处理sprite图片时，我们只能给background-size取具体值。那么这个值取多少呢？其实只要写我们切出来的图片的实际尺寸就行。
比如我们的元素为5050px，sprite图片为200px 50px，那css应该如下：
需要引用的雪碧图如下
https://www.toptal.com/developers/css/sprite-generator
说白了就是把很多背景图片 合到一起放在一张大的图片上,设置背景的时候, 用 图片的 偏移量 来控制.
好处: 在背景图片很多的情况下, 多次请求减少为1次请求, 加快网页的速度.
劣势也很明显: 维护起来很麻烦, 想改任一个图标, 都要打开这个大图片, 而且位置什么的都 维护起来很吃力.
1、将用到的背景图片压缩为zip格式的压缩包2、用Css图片拼合生成器将其拼合成一张图片，然后下载该图片
3、拼合完成后会生成相应的Css规则，该文件定位了每个图片的位置及图片的宽度和高度
4、在Css样式中定位背景图片！
