精灵图的作用

一、精灵图(sprites)

1、作用(优点)

当页面中有很多图片时，服务器就会频繁的接受和发送请求图片，造成服务器请求压力大，这将大大降低页面的加载速度。

故，为了**减少服务器发送和接受请求的次数，提高网页的加载速度。**使用 CSS 精灵图（雪碧图）

缺点：

1. 图片文件大
2. 放大和缩小失真
3. 一旦图片完成更换会很复杂

2、使用

核心：

1. 主要用在背景图，就是将许多小的图片放到一张大图片上，这样服务器只需要一次请求就可以。
2. 移动背景图片，需要background-position，背景位置
3. 移动的距离为 x,y轴，但是和数学坐标系有所不同。**往左走是负的，往上走是负的。**一般测量值都是负值。
4. 使用精灵图需要精准测量。