CSS sprite使用

　　CSS Sprites叫css精靈或者雪碧圖，是一種網頁圖片應用處理方式。

　　CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置。

　　在網頁訪問中，客戶端每須要訪問一張圖片都會向服務器發送請求，因此，訪問的圖片數量越多，請求次數也就越多，形成延遲的可能性也就越大。

　　因此，CSS Sprites技術加速的關鍵，並非下降質量，而是減小個數，固然隨之而來的增長內存消耗，CSS Sprites圖片繁瑣的合成等缺點在網站性能的提高前，也就不足爲道了。

CSS Sprites 的優勢：
     一、減小圖片的字節
     二、減小了網頁的http請求，從而大大的提升了頁面的性能
     三、減小命名難的問題。
     四、維護起來更加方便。

CSS Sprites 的缺點：
     一、在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；
    二、CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

 

ico {width: xxxpx;height:xxxpx;background: url("bg_sprite.png") no-repeat X座標 Y座標;}

下面是個人公衆號，你們能夠關注一下，能夠一塊兒學習，一塊兒進步：