利用css sprites減少圖片請求

　　css sprites：網站前端開發人員大多稱之為“css精靈”，通俗的理解就是：將多張小圖片合成為一張大圖片，減少http請求次數而達到網頁提速。下面以淘寶網為例子，為大家講解下css sprites是如何?的。如我們要在網頁上顯示“今日淘寶活動”這個圖片。

　　

 

　　實現代碼：

        <div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -133px -153px"></div>

　　width：要定位元影像片的寬度。height：要定位元影像片的高度。(css sprites必須定義容器的大小，不然會顯示出錯)

　　background：url(sprites.gif)背景圖片的路徑。 no-repeat：背景不重複。 -133px：X座標的位置 ，-153px：y座標的位置。

　　可能有人會不明白這個-133px 和-153px是怎麼來的，這個座標是小圖片在大圖片中的x座標和y左邊座標，如下圖，紅色點的座標是在大圖上x座標為133px y座標為153px。(座標也可以用百分比表示，如：50% 50%)有人會提出，為什麼座標是正數，你卻寫成了負數呢?因為用background這種方式定義背景圖片，預設x y座標是0 0。如下圖今日淘寶活動圖表片的座標是133px 153px，所以要用-133px -153px來歸零才能正確的顯示圖片。

　　

 

　　css sprites的優點：可以減少http的請求數，如10張單獨的圖片就會發出10次的http請求，合成為一張的大圖片，只會發出一次的http請求，從而提高了網頁載入速度。

　　css sprites的缺點：凡事有利必有弊端。可能有人喜歡，有人不喜歡，因為每次圖片改動都要往這張圖片新增內容，圖片的座標定位要很準確會，會稍顯繁瑣。座標定位要固定為某個絕對值，因此會失去如center的一些靈活屬性。

　　css sprites有優點也有缺點。要不要使用，具體要看網頁以載入速度為主還是以維護方便容易為主。