前端教程之CSS（五）

1. 精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当页面中的图像很多时，服务器会频繁地接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。所以就出现了CSS精灵技术（也称CSS Sprite、CSS雪碧）。 ，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

1.1 核心原理

将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 使用核心

1. 移动背景图片位置，此时可以使用 background-position
2. 移动的位置就是这个目标图片的 x 和y坐标，注意网页中的坐标有所不同。
3. 一般情况下都是往上往左移动，所以数值是负值（x轴右边走是正值，左边走是负值，y轴同理）
4. 需要精确测量，每个小背景图片的大小和位置。

1.3 如何测量精灵图

使用ps的切片工具，然后双击想要移动的图标