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

標籤：style   blog   http   io   color   ar   os   使用   sp   

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

　　效果為：

　　

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