CSS Sprites 網頁背景圖片定位技術簡述

不少時候咱們打開一些網站的背景圖片會發現是不少圖標集合的一張完整的圖片。這種網頁使用的就是CSS Sprite，經過將多個圖標整合在同一張圖片，能夠減小向服務器請求圖片的次數，加快網頁的加載速度。

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

    加速的關鍵，不是下降質量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。因此，圖片越多請求次數越多，形成延遲的可能性也就越大。

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

背景圖片定位方法：

    咱們知道，CSS中寫背景的代碼形式爲：

1. .class{ background:url(./images/bg.png) no-repeat left top #ccc;}

    若是使用CSS Sprite方式對背景圖片進行定位，那麼須要修改的就是上述代碼中的 left 和 top 兩處。事實上，left 和 top兩個單詞所對應的均是0px，也就是說上述代碼也能夠寫成：

1. .class{ background:url(./images/bg.png) no-repeat 0px 0px #ccc;}

    其實現的效果是背景圖片坐上對其。下面，Kurly根據本身的經驗和理解，給你們繪製一張座標圖，以下。CSS的背景圖片是以左上角爲原點的，這樣咱們就能夠理解前面代碼是左上角對齊的效果了。同時，請注意觀察圖示座標軸的正方向，明白了這一點就好辦了。圖中Kurly標出了(-50px, -50px)的座標位置，若是咱們要將白色圖片中的邊長爲50px的灰色正方形做爲一個長寬分別爲50px的DIV的背景圖片，那麼咱們只須要這樣來編寫CSS：

1. .box{
2.     height:50px;
3.     width:50px;
4.     background:url(./images/bg.png) no-repeat -50px -50px;
5. }

    另外，若是咱們的DIV層爲邊長200像素的正方形，咱們想讓這個灰色正方形做爲背景且居中，那CSS又該怎麼寫呢？很簡單，只要理解了座標軸的方向，根據上例，咱們很容易就知道座標值應該修改成正的50px便可（注意：黑色區域爲背景圖片之外的區域）。CSS以下

1. .box{
2. height:200px;
3. width:200px;
4. background:url(./images/bg.png) no-repeat 50px 50px;
5. }

    相信，讀完上面的示例，你已經明白如何經過CSS Sprite方式定位你的背景圖片了吧！