1. 精靈技術的使用
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。
2. 制作精靈圖
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。
大部分情況下，精靈圖都是網頁美工做。
我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決於最寬的那個背景。
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。
3.以京東的精靈圖為例
使用如下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.mod_service_duo {
border:1px solid purple;
background-repeat: no-repeat;
background-image: url(./23f3ddf914b1b527d0429a3d713cfe3a.png);
background-position: 0 -192px;
width:36px;
height:42px;
}
</style>
<body>
<div class="mod_service_duo"></div>
</body>
</html>
效果如圖所示
4. 總結
使用精靈圖的優點
對於瀏覽器來說請求多張小的圖片和請求一張大的圖片當然是后者的性能更好，大大減少了瀏覽器向服務器的請求次數，減少了http請求次數，這也是精靈圖被廣泛使用的主要原因。
使用精靈圖可以減少圖片的字節數，如果一張圖片是4K，9張就是36K，而將所有圖片整合在一張圖片上之后，只需要4-5K就可以了。
在整理圖片時，不需要糾結圖片的取名問題，特別是在大型瀏覽器中，這種小的圖片非常之多。將所有圖片整合在一起，只需要取一個綜合的名字就可以了，這樣也可以大大提高工作效率。
如果想改變網站的風格，只需要改變一張圖就可以了，便於后期的維護和修改。
使用精靈圖的缺點
一定要考慮當前盒子的大小會不會漏出其他圖片，一般情況來說還可以，但是如果網頁時自適應的，那么可能就會比較麻煩了。
精靈圖的創建比較麻煩，要計算好每個圖片之間的距離和位置，如果做的不合理，那么使用時就會比較麻煩。
精靈圖在后期維護上也帶來了一定麻煩，因為所有的圖片是在一張圖片上，甚至位置都是相互影響的，所以一旦改變了一個，可能整張精靈圖都需要重新做。