【CSS】CSS Sprites (CSS 精靈) 技術

　　CSS Sprites

　　CSS Sprites在國內不少人叫css精靈，是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差很少的，因此無需顧忌這個問題。

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

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

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

---

　　 CSS Sprites的使用：

　　　　.bg_sprite{background-image:url(/整圖地址); background-repeat:no-repeat}

　　　　 #ico1 {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

　　　　#ico2 {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

　　　　#ico3 {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

　　　　.nav {width:容器寬度;height:容器高度;background-position:X座標 Y座標}

　　固然也有簡寫方法：

　　　　#ico1 {width:容器寬度;height:容器高度;background:url(/整圖地址) no-repeat X座標 Y座標;}

　　其中，X座標和Y座標表示原圖相對於ico1框左上角點的偏移量，即 座標 0 0表示背景圖和ico1框的左上角點重合

---

　　 例子：

　　圖片"bg_sprite.png"

　　

　　代碼　　

1 ico {width: 16px;height:16px;background: url("bg_sprite.png") no-repeat 0 -234px;}

　　效果爲：