产生原因

当用户访问网站，需要向服务器发送请求，网页上每张图像都要经过一次请求才能展现给用户。故若一个网页背景应用多张细碎图像，图像过多情况下，服务器会频繁接受和发送请求，导致降低网页加载速度，影响服务器效率。为了解决此问题，css精灵技术随之产生。

原理

css精灵技术将网页中的细碎零星图像整合到一张大图中，再将大图应用于背景。如此，当用户访问页面，只需向服务器发送一次请求，图像便可全部显示。通常情况下，这个由许多小的背景图像整合成的大图被称为精灵图。

1、背景图像很少的情况下，不必要使用精灵技术，维护成本高

2、精灵图上放的是小的装饰性质的背景图像，插入图像不能放上去使用

3、精灵图的宽度取决于最宽的背景图像

4、精灵图可以横向或者纵向摆放

5、使用background属性可以精确定位精灵图中某个小图

1、测量位置。测量所需图片在整张精灵图上的位置，测其x、y轴方向

2、使用background属性引入精灵图中的小图，确定好其位置，以便于之后使用时精确定位

1、减少网页对服务器的请求，提高网页加载速度，提高服务器效率和网页性能

2、减少图片字节。通常多张图片合成精灵图的字节小于单张图片的字节总和

维护较难，维护成本高。当页面背景图片有改动，当图片改动大时，可能需要对整张精灵图进行重新页面布局