雪碧圖有什麼用

雪碧圖即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，其作用是：1、減少加載網頁圖片時對伺服器的請求次數；2、提高頁面的加載速度；3、減少滑鼠滑過的一些bug；4、解決網頁設計師在圖片命名上的困擾；5、方便更換風格。

本文操作環境：Dell G3電腦、Windows7系統。

css雪碧圖即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。

雪碧圖有什麼用？

1、減少載入網頁圖片時對伺服器的請求次數

可以合併多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一張圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量。

2、提高頁面的載入速度

sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。

單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。

3、減少滑鼠滑過的一些bug

IE6不會主動預先載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。

4、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。

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

推薦：《css影片教學》

以上是雪碧圖有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！