【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"

　　

　　代碼　　

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

　　效果為：