CSS Sprite技術(shù)被國(guó)內(nèi)一些人稱(chēng)為CSS雪碧圖邪锌，其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中摩瞎，再利用CSS的“background-image”膝昆，“background- repeat”，“background-position”的組合進(jìn)行背景定位訪問(wèn)圖標(biāo)烛恤。
我曾經(jīng)用過(guò)的一張雪碧圖：
很多網(wǎng)站喜歡運(yùn)用雪碧圖廓潜，訪問(wèn)量大的網(wǎng)站尤是如此抵皱。為什么呢? 分開(kāi)管理不是更加靈活嗎?大家都這么做當(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ù)大量減少
用過(guò) Opera 的朋友可能會(huì)對(duì)它那個(gè)顯示圖片下載的進(jìn)度條印象很深, 它會(huì)顯示 “已下載圖片/圖片總數(shù)”. 對(duì)于 Web 服務(wù)器上的每個(gè)獨(dú)立資源, 都需要去連接和獲取的. 所以大家都設(shè)法將很多圖標(biāo)放在一個(gè)圖片上, 連接一次就全部取回來(lái). 這也許是一圖多標(biāo)的主要目的.
（3） 讓瀏覽器將圖標(biāo)預(yù)先下載
瀏覽器為了盡快地顯示頁(yè)面, 一般只是將打開(kāi)頁(yè)面時(shí)用到的圖片下載到本地, 而一些可能用到, 但沒(méi)有立刻被用到的圖片需要在應(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)移動(dòng)到 Tab 按鈕時(shí), 圖標(biāo)才開(kāi)始下載, 這樣會(huì)帶給用戶(hù)很不好的視覺(jué)效果. 所以我覺(jué)得遇到這種情況時(shí), 將多個(gè)圖標(biāo)合并在一起的處理是必須的.
【缺點(diǎn)】
（1）圖片難以管理, 難以定位
如果你要更換一個(gè)圖標(biāo), 那么你需要編輯整個(gè)大圖片. 如果你要改變一個(gè)圖標(biāo)的大小, 很可能你需要重新計(jì)算它的位置, 甚至無(wú)從下手, 只能在別的位置再添加一個(gè)圖標(biāo).
（2） 2 > 1
兩個(gè)圖標(biāo)合成的圖片是肯定比其中一個(gè)圖標(biāo)獨(dú)占的圖片大的, 也就是說(shuō), 下載這個(gè)圖片所需的時(shí)間將比單獨(dú)一個(gè)圖標(biāo)用的時(shí)間長(zhǎng). 瀏覽器顯示圖片一般都是下載完則顯示或者邊下載邊顯示的, 如果你那幾個(gè)圖標(biāo)組成的圖片容量比較大, 那么它們不能逐個(gè)顯示予用戶(hù), 會(huì)造成很不好的用戶(hù)體驗(yàn).
【實(shí)現(xiàn)方式】
（1）PS手動(dòng)拼圖
適合小網(wǎng)站呻畸，圖標(biāo)不是很多的時(shí)候使用移盆。
（2）使用sprite工具自動(dòng)生成
CssGaga：一款自動(dòng)化網(wǎng)頁(yè)設(shè)計(jì)工具集合軟件（該軟件只能在Windows環(huán)境下運(yùn)行）。
利用它能快速生成雪碧圖及對(duì)應(yīng)的background-position代碼伤为，還能進(jìn)行css格式化,將css進(jìn)行壓縮味滞，去掉多余的空格、換行钮呀、注釋?zhuān)⑶疫M(jìn)行兼容性的優(yōu)化。
可以訪問(wèn)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)放置在一起
這樣可以少寫(xiě)一些 CSS 代碼. 設(shè)置一個(gè) background, 再在每個(gè)項(xiàng)設(shè)置 background-position 就行了便脊。
（4）不要將大圖綁在一塊
大圖綁在一塊影響頁(yè)面加載速度蚂四，大部分用戶(hù)都不會(huì)耐心地等待頁(yè)面的所以文件被下載完畢再進(jìn)行閱讀。
示例：
