CSS精灵的作用和特点

CSS sprite将网站的背景图合到一张大图片上，它的出发点已经不仅是“解决滑过状态时背景图片出现空白”的问题了。图片的加载是会发出HTTP请求的，一张图片需要一条HTTP请求，如果一个页面需要加载多张图片，那么它会相应地发出多条HTTP请求。HTTP请求数越多，访问服务器的次数就越多，服务器的压力也就越大。将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减小服务器压力。

对于流量大的网站来说，使用CSS sprite技术非常有价值。CSS sprite技术看似简单，其实不容易掌握，主要有如下原因:

1)它能合并的只能是用于背景的图片，对于img设置的图片，是不能合并到CSS sprite大图中的，如果合并这些图片会影响页面可读性。

2)对于横向和纵向都平铺的图片，也不能使用CSS sprite;如果是横向平铺的，只能将所有横向平铺的图合并成一张大图，只能竖直排列，不能水平排列;如果是纵向平铺的，我们只能将所有纵向平铺的图合并成一张大图，只能水平排列，不能竖直排列。

图片如何排列能够尽量紧凑，同时保证不会影响扩展性。这点是CSS sprite技术困难也是最具挑战性的地方。

CSS sprite技术虽然越来越受人追捧，但它也存在一定问题–将多张图片合并为一张图片，通过background-position进行定位，这对于图片的位置精确程度要求非常高，一方面在制作网页时，我们需要精确测量坐标，还需要考虑如何让图案尽可能密集地排列，这影响了开发速度:另一方面，大图中每个小图的坐标值都不可轻易改动，因为每改动一个小图，都可能影响到周边的其他图片，这大大降低了可维护性。

CSS sprite的最大好处是减少HTTP请求数，减轻服务器的压力，但它却需要付出“降低开发效率”和“增大维护难度”的代价。对于流量并不大的网站来说，CSS sprite带来的好处并不明显，而它付出的代价却很大，其实并不划算。所以，是否使用CSS sprite主要取决于网站流量。