站長資訊網(wǎng)
css sprites又稱css精靈圖，是一種網(wǎng)頁圖片應用處理方式，是一種將多個圖像組合成單個圖像文件以在網(wǎng)站上使用的方法。其優(yōu)點有：1、減少網(wǎng)頁的http請求，提高頁面的加載速度；2、減少圖片的字節(jié)；3、減少了命名困擾；4、更換風格方便。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css sprite（雪碧圖）
CSS Sprites是一種性能優(yōu)化技術(shù)，是一種將多個圖像組合成單個圖像文件以在網(wǎng)站上使用的方法，以提高性能；也被稱為css 精靈圖。
優(yōu)點
a) 減少網(wǎng)頁的http請求，提高頁面的加載速度
b) 減少圖片的字節(jié)：多張圖片合并成1張圖片的字節(jié)小于多張圖片的字節(jié)總和
c) 減少了命名困擾：只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高制作效率
d) 更換風格方便：只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風格就可以改變，維護起來更加方便
缺點
a) 在圖片合并的時候，需要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂
b) 背景設置時，需要得到每一個背景單元的精確位置
c) 維護合成圖片時比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，最好只是往下加圖片，而不要更改已有圖片
為什么要使用Sprites（精靈圖）？
網(wǎng)頁通常包含多個圖像。這些包括圖標，按鈕，徽標，相關(guān)圖片和其他圖形。當頁面中加載圖像時，瀏覽器向服務器發(fā)出HTTP請求。分別加載每個圖像需要多次調(diào)用HTTP服務器，這可能導致下載時間變慢以及帶寬使用率過高。
CSS Sprites會將多個圖像組合成一個稱為精靈表或拼貼圖的單個圖像，用戶不下載多個文件，而是下載單個文件并通過偏移文件顯示必要的圖像（或精靈圖）。
這樣可以減少對服務器的調(diào)用、減少呈現(xiàn)網(wǎng)頁所需的下載次數(shù)，節(jié)省帶寬并縮短用戶端的下載時間，減少網(wǎng)絡擁塞。
如何使用CSS Sprites（精靈圖）？
因為CSS Sprites是一張多個圖像組合成單個圖像，在精靈表中多個圖像會被放置在網(wǎng)格狀圖案里，呈現(xiàn)網(wǎng)狀分布。
當需要特定圖像（精靈圖）時，一般會通過CSS background-images屬性引用精靈表，在通過CSS background-position屬性對其進行偏移定位得到所需的精靈圖，然后以像素為單位定義精靈圖的大小。
（學習視頻分享：css視頻教程）
