CSS Sprite雪碧圖

CSS Sprite 也叫CSS精靈，該方法是將多個小圖標等圖片集成到一張大圖上，而後利用 background-image 和background-position 兩個屬性進行背景定位來控制須要顯示的部分。

 

好比在有不少小圖片、小圖標的網頁上，每一個小圖標都單獨用一張圖片， 頁面加載的時候，每張圖片的顯示都產生一個HTTP請求，若是請求文件過多則會引起性能問題。爲了減小http請求數，將大量的圖片整合成一張圖（Sprite）來使用，這樣加載的時候只需加載一次，從而提升頁面的性能。

 

雪碧圖的製做：

• PS 手動拼圖
• 使用 Sprite 工具自動生成（CssGaga 或者 CssSprite.exe）（CssGaga 的詳細使用見百度經驗）

 

何時使用及使用技巧：

1. 靜態圖片，圖片不隨用戶信息的變化而變化，好比一些小圖標等；
2. 小圖片，容量比較小的；圖片加載量比較大的。大圖片不建議用，拼完以後就更大了，加載就慢了；
3. 使用到固定大小的盒子（box）裏，這樣纔可以遮擋住不該該顯示的部分；
4. CSS Sprites 的圖片儘可能不要有大空隙，多數狀況下會增大致積；
5. 在 CSS Sprites 圖片中，水平排列的圖片會比垂直排列的文件體積大。

 

缺點：

1. 在圖片合併的時候，要把多張圖片有序合理的合併成一張圖片，須要留足夠的空間，防止出現沒必要要的背景，相比直接使用單個圖片比較繁瑣；
2. 在寬屏，高分辨率的屏幕下的自適應頁面，圖片若是不夠寬很容易出現背景斷裂；
3. 比較麻煩，須要測量計算每個背景單元的精確位置；
4. 維護的時候比較麻煩，若是頁面背景在原來的地方放不下，又只能（最好）往下加圖片而後更改CSS，這樣圖片的字節就增長了；
5. 因爲圖片的位置須要固定爲某個絕對數值，這就失去了諸如 center 之類的靈活性。