css sprites是什麼，有什麼優點？

css sprites又稱為css精靈圖，是一種網頁圖片應用程式處理方式，是一種將多個圖像組合成單一圖像檔案以在網站上使用的方法。其優點有：1、減少網頁的http請求，提高頁面的載入速度；2、減少圖片的位元組；3、減少了命名困擾；4、更換風格方便。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css sprite（雪碧圖）

CSS Sprites是一種效能最佳化技術，是一種將多個影像組合成單一影像檔案以在網站上使用的方法，以提高性能；也被稱為css 精靈圖。

優點

a) 減少網頁的http要求，提高頁面的載入速度

b) 減少圖片的位元組：多張圖片合併成1張圖片的位元組小於多張圖片的位元組總和

c) 減少了命名困擾：只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高製作效率

d) 更換風格方便：只需在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便

#缺點

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

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

c) 維護合成圖片時比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，最好只是往下加圖片，而不要更改已有圖片

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

網頁通常包含多個圖像。這些包括圖標，按鈕，徽標，相關圖片和其他圖形。當頁面中載入圖像時，瀏覽器會向伺服器發出HTTP請求。分別載入每個映像需要多次呼叫HTTP伺服器，這可能導致下載時間變慢以及頻寬使用率過高。

CSS Sprites會將多個圖像組合成一個稱為精靈表或拼貼圖的單一圖像，用戶不下載多個文件，而是下載單個文件並透過偏移文件顯示必要的圖像（或精靈圖）。

這樣可以減少伺服器的呼叫、減少呈現網頁所需的下載次數，節省頻寬並縮短用戶端的下載時間，減少網路擁塞。

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

因為CSS Sprites是一張多個影像組合成單一影像，在精靈表中多個影像會被放置在網格狀圖案裡，呈現網狀分佈。

當需要特定影像（精靈圖）時，一般會透過CSS background-images屬性引用精靈表，在透過CSS background-position屬性對其進行偏移定位得到所需的精靈圖，然後以像素為單位定義精靈圖的大小。

（學習影片分享：css影片教學）

以上是css sprites是什麼，有什麼優點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！