什么是CSS Sprites

CSS Sprites是指把網頁中很多小圖片（很多圖標文件）做成按規律排列的一張大圖上，在顯示的時候通過background-image、background-position顯示圖片特定部分達到和分散的一張張小圖片一樣的效果。

JqueryUI的效果圖如下

很多頁面常用的小圖標，但是我們看看每個小圖標的源碼的時候會發現，這些小圖標的src是同一個文件，都是這張大圖

為什么要使用CSSSprites

姑且先不管這是怎么實現的，我們先來了解一下又好好的方法它不用為什么要用這種怪異的方式，在代碼書寫和可讀性上都有了一定程度的開銷，這么干有什么好處能讓人們放棄安逸的做法來用CSS sprites呢？

我們知道瀏覽器在加載網頁的時候圖片文件及外部的JS、CSS文件都需要單獨下載，但JS是堵塞HTML下載進程的，圖片是另外開啟進程來下載的，不同的瀏覽器同時下載圖片的數量的限制一般為一個或者五個或者十個，所以如果一個遍布了圖片的網頁，或者一系列網頁，即使你網速再快也要分批次的下載這些圖片。

每個圖片的下載都是一次完整的HTTP請求-響應。而把很多小圖片集中到一張圖片上這樣在只需要一個HTTP請求-響應，在現在網速條件下不超過200k的圖片下載速度是差不多的，下載一次之后無論是該頁面還是站點其它頁面使用包含在這張大圖上的圖片的時候就可以使用緩存，不會帶來反復下載的開銷，所以只有一個HTTP請求-響應。

所以使用CSS sprites最大的好處就是減少HTTP請求，加快網站響應速度，提高網站性能。也許會問，多幾個HTTP請求真的會那么嚴重嗎？如果使用一張大圖，那么很可能大圖中有幾個圖片用不到，這不是多加載內容了嗎，和多幾次HTTP請求開銷差距有那么大嗎？

CSS Sprites實現

首先了解一下CSS的 background-position

background-position設置或檢索對象的背景圖像位置。必須先指定 background-image屬性。

語法：

background-position: length || length

background-position: position || position

取值：

length :百分數 |由浮點數字和單位標識符組成的長度值。

position :top | center | bottom | left | center |right

如： /* states and images */.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }/* positioning */.ui-icon-carat-1-n { background-position: 0 0; }.ui-icon-carat-1-ne { background-position: -16px 0; }

小結：

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

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

版權聲明：本文為博主原創文章，未經博主允許不得轉載。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com