CSS3精灵技术

1 背景

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

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

2 本质

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图 。

3 原理

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位。

其中最关键的是background-position属性，它可以用数字精确地定位出背景图片的位置。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

4 制作

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。一般情况，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

5 优点

1、能够减少浏览器向服务器的请求次数，减少网页的http请求，从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。

2、能减少图片的字节。你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可。

3、解决了网页设计师在命名上的困扰。在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了，如此便提高了工作效率。

4、更换风格方便。如果想改变网站风格，你只需要处理一张图片就可以了，修改图片的颜色和样式，那么整个网站的风格就改变，便于后期的维护和修改。

6 缺点

1、在图片合并的时候，需要考虑当前盒子会不会漏出其他的背景图。但是，最令人头疼的是，页面自适应时，背景图的位置就没那么容易掌控了，很容易出现背景断裂。

2、制作精灵图的过程比较繁琐。你需要处理好每张图之间的距离和位置，如果做得不合理，那么使用起来就比较麻烦，甚至需要单独创建一个空的盒子来装背景图。

3、使用精灵图的页面后期维护带来了麻烦。由于多张图在一张图上，如果改变一张背景图，如果大小发生变化，那么其他的图片也需要跟着变化，所有的背景定位都将需要改变。所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。