CSS sprite使用


  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坐標;}

下面是我的公眾號,大家可以關注一下,可以一起學習,一起進步:
 
        


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM