精靈圖產生背景：
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>
