CSS Sprite技術(shù)被國內(nèi)一些人稱為CSS雪碧圖，其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位訪問圖標(biāo)。
我曾經(jīng)用過的一張雪碧圖：
很多網(wǎng)站喜歡運(yùn)用雪碧圖，訪問量大的網(wǎng)站尤是如此。為什么呢? 分開管理不是更加靈活嗎?大家都這么做當(dāng)然有它的優(yōu)點(diǎn)， 但同樣存在缺點(diǎn)。
【優(yōu)點(diǎn)】
（1） 1 + 1 < 2
圖標(biāo)放在一起, 可以令圖標(biāo)的總?cè)萘可孕∫稽c(diǎn). 這不是最重要的, 但我可以告訴你, 很多程序員都是完美主義者.
（2）讓連接次數(shù)大量減少
用過 Opera 的朋友可能會對它那個(gè)顯示圖片下載的進(jìn)度條印象很深, 它會顯示 “已下載圖片/圖片總數(shù)”. 對于 Web 服務(wù)器上的每個(gè)獨(dú)立資源, 都需要去連接和獲取的. 所以大家都設(shè)法將很多圖標(biāo)放在一個(gè)圖片上, 連接一次就全部取回來. 這也許是一圖多標(biāo)的主要目的.
（3） 讓瀏覽器將圖標(biāo)預(yù)先下載
瀏覽器為了盡快地顯示頁面, 一般只是將打開頁面時(shí)用到的圖片下載到本地, 而一些可能用到, 但沒有立刻被用到的圖片需要在應(yīng)用的時(shí)候再進(jìn)行下載. 最經(jīng)典的例子可能是導(dǎo)航菜單的 Tab 圖標(biāo), 如果普通狀態(tài)的 Tab 圖標(biāo)和鼠標(biāo)懸停時(shí)的圖標(biāo)都是獨(dú)立放置的, 那么當(dāng)你鼠標(biāo)移動到 Tab 按鈕時(shí), 圖標(biāo)才開始下載, 這樣會帶給用戶很不好的視覺效果. 所以我覺得遇到這種情況時(shí), 將多個(gè)圖標(biāo)合并在一起的處理是必須的.
【缺點(diǎn)】
（1）圖片難以管理, 難以定位
如果你要更換一個(gè)圖標(biāo), 那么你需要編輯整個(gè)大圖片. 如果你要改變一個(gè)圖標(biāo)的大小, 很可能你需要重新計(jì)算它的位置, 甚至無從下手, 只能在別的位置再添加一個(gè)圖標(biāo).
（2） 2 > 1
兩個(gè)圖標(biāo)合成的圖片是肯定比其中一個(gè)圖標(biāo)獨(dú)占的圖片大的, 也就是說, 下載這個(gè)圖片所需的時(shí)間將比單獨(dú)一個(gè)圖標(biāo)用的時(shí)間長. 瀏覽器顯示圖片一般都是下載完則顯示或者邊下載邊顯示的, 如果你那幾個(gè)圖標(biāo)組成的圖片容量比較大, 那么它們不能逐個(gè)顯示予用戶, 會造成很不好的用戶體驗(yàn).
【實(shí)現(xiàn)方式】
（1）PS手動拼圖
適合小網(wǎng)站，圖標(biāo)不是很多的時(shí)候使用。
（2）使用sprite工具自動生成
CssGaga：一款自動化網(wǎng)頁設(shè)計(jì)工具集合軟件（該軟件只能在Windows環(huán)境下運(yùn)行）。
利用它能快速生成雪碧圖及對應(yīng)的background-position代碼，還能進(jìn)行css格式化,將css進(jìn)行壓縮，去掉多余的空格、換行、注釋，并且進(jìn)行兼容性的優(yōu)化。
可以訪問ytzong的博客99css學(xué)習(xí)CssGaga的使用方法。
【使用注意事項(xiàng)】
（1）讓圖標(biāo)盡量排列得有規(guī)律
有規(guī)律地排放的圖標(biāo)跟容易定位和維護(hù), 這里的間隔可以使用 16, 32, 48, 96 等標(biāo)準(zhǔn)尺寸。
（2） 將背景顏色一致的圖標(biāo)放置在一起
如果背景顏色不一樣, 最好分為兩個(gè)或多個(gè)圖片放置, 特別是背景顏色相近的, 很容易混淆。
（3） 將相同欄目的圖標(biāo)放置在一起
這樣可以少寫一些 CSS 代碼. 設(shè)置一個(gè) background, 再在每個(gè)項(xiàng)設(shè)置 background-position 就行了。
（4）不要將大圖綁在一塊
大圖綁在一塊影響頁面加載速度，大部分用戶都不會耐心地等待頁面的所以文件被下載完畢再進(jìn)行閱讀。
示例：
