图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图作为装饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这大大减低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites 、CSS雪碧）。
CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，想要精确定位到精灵图中的某个小图。
核心原理：将网页中的一些小背景图像整合到一张大图中，当用户访问页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来。
使用精灵图核心：
案例：
<head>
<style>
.icon1 {
width: 23px;
height: 23px;
/*background的复合写法：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置*/
/*url(images/sprites.png 背景图片地址，no-repeat 背景不平铺，0 -107px 背景图片位置) */
background: url(images/sprites.png) no-repeat 0 -107px;
}
.icon2 {
width: 23px;
height: 23px;
background: url(images/sprites.png) no-repeat -157px -107px;
margin: 100px;
}
</style>
</head>
<body>
<div class="icon1"></div>
<div class="icon2"></div>
</body>
使用精灵图核心总结：
CSS精灵图其实网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图
大部分情况下，精灵图都是网页美工做
背景图片很少的情况，没有必要使用精灵技术，维护成本太高，如果背景图片比较多，可以建议使用。
cs