Day 18 CSS <Sprite 精灵图>

1. 为什麽需要精灵图

一个网页中会需要很多小的背景作为修饰，若图像过多服务器频繁接收&发送会造成服务器压力过大，将降低页面加载速度

因此，为了有效减少服务器压力提高页面的加载速度，就使用CSS精灵图技术来解决问题 ( 也称 CSS Sprites , CSS雪碧)。

核心原理 : 将网页中的小背景图像整合到大图中，这样服务器就只需要一次请求即可。

精灵图技术目的 : 为了有效减少服务器接收&发送请求的次数，提高页面的加载速度

2. 精灵图的使用

a. 精灵图技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中。
b. 这个大图片也称Sprites 精灵图 或者 雪碧图
c. 移动背景图片位置，可以使用background-position。
d. 移动的距离就是这个目标图片的 x 和 y 座标。注意网页中的座标有所不同
e. 因为一般情况下都是往上往左移动，所以是负值
f. 使用精灵图时需要精确测量每个小背景图片的大小和位置

3. 总结

a. 精灵图主要针对小的背景图片使用
b. 主要藉助於背景位置来实现—background-position。
c. 一般情况下精灵图都是负值。

(X轴右边为正值，左边为负 y轴同理)

w3school 精灵图说明