精灵图
项目中将多张小图片放在一张大图上，合并成一张大图片，这张大图片称之为 精灵图
项目中使用精灵图可以减少服务器发送的次数，减轻服务器的压力，提高页面的加载速度。
如果我们要在页面展示 5 张小图片，要是 5 张小图片分别发送的话，就要发 5 次；要是我们将其合成一张精灵图，那么服务器只需要给浏览器发送一次就可以了。
示例：
实现步骤：
（1）先创建一个 盒子 ，盒子大小与小图的大小一致；
（2）通过 PxCook （像素大厨,之前的文章有说过如何使用）量取小图片的大小，然后将小图片的宽高设置给盒子，精灵图的标签一般用 行内标签 ，使用中通过元素显示属性将其转为 行内块 ，方便设置宽高等属性；
（3）将精灵图设置为盒子的 背景；
（4）通过 PxCook 测量小图片 左上角坐标，分别取负值设置给盒子的 background-position:x y; 改变背景图的位置，向左或向上移动图片，位置取负数。
背景图片大小
使用 background-size:宽度 高度; 属性来设置背景图片的大小，取值如下：
- 数字 + px ：最 常用的取值方式，方便简单；
- 百分比 ：当前盒子自身的宽高 百分比；
- contain ：包含，将背景图片等比例缩放，直到不会超出盒子的最大；
- cover ：覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白；
示例：
设置背景图片的大小为 300px
缩放盒子的 50%
包含：如果图片的宽或者高与盒子的尺寸相同，另一个方向则会停止缩放，这样会导致盒子留有空白区域
覆盖：保证宽或者高与盒子尺寸完全相同，导致图片显示不全
工作中，通常图的比例和盒子的比例都是相同的，contain 和 cover 效果完全相同
