CSS——精灵图

精灵图

一个网页中往往会应用很多小的背景像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送亲求图像，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现CSS精灵技术（也称CSS prites,CSS 雪碧）

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

精灵的使用

1. 使用经理图核心:
   1. 精灵技术主要针对背景图片使用，就是把多个小背景整合到一张大图片中。
   2. 这个大图片也称为sprites精灵图或者雪碧图
   3. 移动背景图片位置，此时可以使用background-position
   4. 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
   5. 因为一般情况下都是往上往左移动，所以数值都是负值。
   6. 使用精灵图的时候需要精准测量，每个小背景图片的大小和位置。
2. 精灵图主要针对于小的背景图片。
   1. 精灵图主要针对小的背景图
   2. 主要借助背景位置来实现—background-position
   3. 一般情况下精灵图都是负值（千万注意网页中的坐标，x轴右边走是正值，左边走是负值，y轴同理）

background:url(url) no-repeat x,y;