CSS 精灵图

为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术（CSS Sprites、CSS 雪碧）

核心原理：将网页中一些小背景图整合到一张大图——>服务器仅请求一次即可

精灵图（sprites）的使用

核心：

1. 针对背景图使用——多个小背景图整合一张大照片
2. 大图片-sprites-精灵图-雪碧图
3. 移动背景图位置——>background-position
4. 移动距离——>目标图片的x，y坐标，右下分别为正方向
5. 一般上、左移动——数值为负值
6. 使用精灵图需精确测量，图大小及位置

例：