CSS精灵技术

1.原理：

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

2.本质

一种处理网页背景图像的方式（主要是背景图片），将一个页面的涉及的所有零星背景图像都集中到一张大图中去，将大图应用于网页，当用户访问该页面时，只需要向服务器发送一次请求，，网页中的背景图像就会全部显示出来。

3.使用

background 控制 ，size （大小） background-position （定位）,background-repeat ,background-image,,主要是使用定位，将一张大图拿过来，需要上面的哪个小图的时候，就使用定位将零星的小图的位置显示在需要这个小图的位置。如：

PS:如图中，position的值为负，因为页面中的坐标系原点在左上角，y轴向下。
两个盒子中图片是一样的但是因为上面需要的小图标不一样，所以background-position中定位也是不一样的。
多个盒子用同一个精灵图，可以用一行代码搞定，如下：

<style>
   div, span, p, .name {
    background-image: url(images/tupian.png);
}
</style>