精灵图

精灵图

精灵图的背景

一个网页中会需要很多小的背景图作为装饰，但是如果图像过多时，服务器频繁的接收和发送请求会使得服务器压力过大，降低加载速度。

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

精灵图的核心原理

将一堆小的背景图像整合到一张大图 (精灵图sprites) 上，服务器只需要请求一次就可以了~

精灵图的使用

移动背景图片的位置，调整background-position属性值

[注：属性值是调整x和y坐标的距离，但是网页的坐标是以左到右为x正方向，上到下为y正方向，所以一般我们都向上向左调整精灵图的位置，数值为负值。]