为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中图像过多时，会产生多次的服务器请求，造成服务器请求压力增加，将大大降低页面的加载速度。
因此，为了有效的减少服务器接收和发送请求的次数，提高网页加载速度，出现了 CSS 精灵技术(CSS Sprites)。
CSS Sprites 的原理：将网页中一些小背景图整合到一张大的图片中，服务器只需要一次请求即可获取所有的图像资源。
使用 Sprites
使用精灵图的核心：
- 主要针对于背景图片的使用，将多个小背景图片整合到一张大图片中
- 移动背景图片位置，此时可以使用背景位置实现
background-position: -xpx -ypx - 移动的距离就是目标图片的 x 和 y 坐标。网页坐标横向为 x 垂直方向为 y
- 一般情况下都是将精灵图往上或往左移动，所以数值为负值
- 使用精灵图的时候需要精确测量，每个背景图片的大小和位置都要精确
精灵图缺点
- 图片文件比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂