CSS Sprites叫css精靈或者雪碧圖,是一種網頁圖片應用處理方式。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字精確的定位出背景圖片的位置。
在網頁訪問中,客戶端每需要訪問一張圖片都會向服務器發送請求,所以,訪問的圖片數量越多,請求次數也就越多,造成延遲的可能性也就越大。
所以,CSS Sprites技術加速的關鍵,並不是降低質量,而是減少個數,當然隨之而來的增加內存消耗,CSS Sprites圖片繁瑣的合成等缺點在網站性能的提升前,也就不足為道了。
CSS Sprites 的優點:
1、減少圖片的字節
2、減少了網頁的http請求,從而大大的提高了頁面的性能
3、減少命名難的問題。
4、維護起來更加方便。
CSS Sprites 的缺點:
1、在圖片合並的時候,你要把多張圖片有序的合理的合並成一張圖片,還要留好足夠的空間,防止板塊內出現不必要的背景;這些還好,最痛苦的是在寬屏,高分辨率的屏幕下的自適應頁面,你的圖片如果不夠寬,很容易出現背景斷裂;
2、CSS Sprites在維護的時候比較麻煩,如果頁面背景有少許改動,一般就要改這張合並的圖片,無需改的地方最好不要動,這樣避免改動更多的css,如果在原來的地方放不下,又只能(最好)往下加圖片,這樣圖片的字節就增加了,還要改動css。
ico {width: xxxpx;height:xxxpx;background: url("bg_sprite.png") no-repeat X坐標 Y坐標;}
下面是我的公眾號,大家可以關注一下,可以一起學習,一起進步:
