精灵图产生背景：
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{ 68px; height: 30px; background: url("qq.png") -877px -201px; } </style> </head> <body> <div class="box"></div> </body> </html>
