對 CSSSprites 的理解

CSSSprites（精靈圖），將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用 CSS 的 background-image，background-repeat，background-position 屬性的組合進(jìn)行背景定位。

優(yōu)點：

1.利用CSS Sprites能很好地減少網(wǎng)頁的 http 請求，從而大大提高了頁面的性能，這是CSS Sprites最大的優(yōu)點；

2.CSS Sprites能減少圖片的字節(jié)，把 3 張圖片合并成 1 張圖片的字節(jié)總是小于這 3 張圖片的字節(jié)總和。

缺點：

1.在圖片合并時，要把多張圖片有序的、合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景。在寬屏及高分辨率下的自適應(yīng)頁面，如果背景不夠?qū)?，很容易出現(xiàn)背景斷裂；

2.CSSSprites在開發(fā)的時候相對來說有點麻煩，需要借助photoshop或其他工具來對每個背景單元測量其準(zhǔn)確的位置。

3.維護(hù)方面：CSS Sprites在維護(hù)的時候比較麻煩，頁面背景有少許改動時，就要改這張合并的圖片，無需改的地方盡量不要動，這樣避免改動更多的CSS，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動CSS。