css sprites又稱css精靈圖，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，是一種將多個(gè)圖像組合成單個(gè)圖像文件以在網(wǎng)站上使用的方法。其優(yōu)點(diǎn)有：1、減少網(wǎng)頁(yè)的http請(qǐng)求，提高頁(yè)面的加載速度；2、減少圖片的字節(jié)；3、減少了命名困擾；4、更換風(fēng)格方便。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css sprite（雪碧圖）

CSS Sprites是一種性能優(yōu)化技術(shù)，是一種將多個(gè)圖像組合成單個(gè)圖像文件以在網(wǎng)站上使用的方法，以提高性能；也被稱為css 精靈圖。

優(yōu)點(diǎn)

a) 減少網(wǎng)頁(yè)的http請(qǐng)求，提高頁(yè)面的加載速度

b) 減少圖片的字節(jié)：多張圖片合并成1張圖片的字節(jié)小于多張圖片的字節(jié)總和

c) 減少了命名困擾：只需對(duì)一張集合的圖片命名，不需要對(duì)每一個(gè)小元素進(jìn)行命名提高制作效率

d) 更換風(fēng)格方便：只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變，維護(hù)起來(lái)更加方便

缺點(diǎn)

a) 在圖片合并的時(shí)候，需要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂

b) 背景設(shè)置時(shí)，需要得到每一個(gè)背景單元的精確位置

c) 維護(hù)合成圖片時(shí)比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，最好只是往下加圖片，而不要更改已有圖片

為什么要使用Sprites（精靈圖）？

網(wǎng)頁(yè)通常包含多個(gè)圖像。這些包括圖標(biāo)，按鈕，徽標(biāo)，相關(guān)圖片和其他圖形。當(dāng)頁(yè)面中加載圖像時(shí)，瀏覽器向服務(wù)器發(fā)出HTTP請(qǐng)求。分別加載每個(gè)圖像需要多次調(diào)用HTTP服務(wù)器，這可能導(dǎo)致下載時(shí)間變慢以及帶寬使用率過(guò)高。

CSS Sprites會(huì)將多個(gè)圖像組合成一個(gè)稱為精靈表或拼貼圖的單個(gè)圖像，用戶不下載多個(gè)文件，而是下載單個(gè)文件并通過(guò)偏移文件顯示必要的圖像（或精靈圖）。

這樣可以減少對(duì)服務(wù)器的調(diào)用、減少呈現(xiàn)網(wǎng)頁(yè)所需的下載次數(shù)，節(jié)省帶寬并縮短用戶端的下載時(shí)間，減少網(wǎng)絡(luò)擁塞。

如何使用CSS Sprites（精靈圖）？

因?yàn)镃SS Sprites是一張多個(gè)圖像組合成單個(gè)圖像，在精靈表中多個(gè)圖像會(huì)被放置在網(wǎng)格狀圖案里，呈現(xiàn)網(wǎng)狀分布。

當(dāng)需要特定圖像（精靈圖）時(shí)，一般會(huì)通過(guò)CSS background-images屬性引用精靈表，在通過(guò)CSS background-position屬性對(duì)其進(jìn)行偏移定位得到所需的精靈圖，然后以像素為單位定義精靈圖的大小。

（學(xué)習(xí)視頻分享：css視頻教程）