CSS雪碧圖，即CSS Sprite，也有人叫它CSS精靈圖，是一種圖像拼合技術。該方法是將多個小圖標和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。
雪碧圖的使用場景
靜態圖片，不隨用戶信息的變化而變化。 小圖片，容量比較小（2~3k）。 圖片加載量比較大。目的
減少Http請求數量，加速內容顯示。因為每請求一次，就會和服務器建立一次鏈接，而建立鏈接是需要額外的時間的。
使用
使用雪碧圖之前，我們需要知道雪碧圖中各個圖標的位置。
從上面的圖片不難看出雪碧圖中各個小圖標（icon）在整張雪碧圖的起始位置，例如第一個圖標（裙子）在雪碧圖的起始位置為 x：0，y：0，第二個圖標（鞋子）在雪碧圖的起始位置為 x：0，y：50px，第三個圖標（足球）在雪碧圖的起始位置為x：0，y：100px，依次類推可以得出各個圖片相對于雪碧圖的起始位置。
以上面的雪碧圖為例（實際雪碧圖中各個小圖片的起始位置和上面的展示圖不同）用一個Demo來闡述它的使用方法。
HTML
| <div> <ul class="sidebar"> <li><a href=""><span class="spr-icon icon1"></span>服裝內衣</a></li> <li><a href=""><span class="spr-icon icon2"></span>鞋包配飾</a></li> <li><a href=""><span class="spr-icon icon3"></span>運動戶外</a></li> <li><a href=""><span class="spr-icon icon4"></span>珠寶手表</a></li> <li><a href=""><span class="spr-icon icon5"></span>手機數碼</a></li> <li><a href=""><span class="spr-icon icon6"></span>家電辦公</a></li> <li><a href=""><span class="spr-icon icon7"></span>護膚彩妝</a></li> <li><a href=""><span class="spr-icon icon8"></span>母嬰用品</a></li> </ul> </div> |
