精灵图产生背景：
1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）
精灵图的定义：
1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。
2、背景定位的方式主要通过控制x和y轴的值。
精灵图使用技巧：
1、一般情况：直接一个盒子，里面的背景图片是精灵图，使用时注意x轴和y轴。
2、特殊情况：盒子中有一个小图标，此时，小图标外套一个标签（i标签或者span），给小图标设置定位后（自动转成行内块）定义宽高，这个宽高就是精灵图中的小图的宽高，然后注意x轴和y轴的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 68px;
height: 30px;
background: url("qq.png") -877px -201px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>