武林網(wǎng)(www.survivalescaperooms.com)文章簡介：利用css sprites減少圖片請求.

在高舉“用戶體驗(yàn)”為中心的網(wǎng)絡(luò)時(shí)代，你是否因?yàn)榇蜷_網(wǎng)頁速度太慢而關(guān)閉網(wǎng)頁呢？相信很多人的答案都是肯定的。在高速的網(wǎng)絡(luò)時(shí)代，千萬不要挑戰(zhàn)廣東網(wǎng)民的耐心，不然只會導(dǎo)致網(wǎng)民遠(yuǎn)離你的網(wǎng)站而去。

網(wǎng)頁提速有很多的方法，其中一條就是減少http請求。每一個(gè)網(wǎng)站都會用到圖片，當(dāng)一個(gè)網(wǎng)站有10張單獨(dú)的圖片，就意味著在瀏覽網(wǎng)站時(shí)會向服務(wù)器提出10次http請求來加載圖片。下面為大家介紹減少圖片請求的方法。

css sprites：網(wǎng)站前端開發(fā)者大多稱之為“css精靈”，通俗的理解就是：將多張小圖片合成為一張大圖片，減少http請求次數(shù)而達(dá)到網(wǎng)頁提速。下面以淘寶網(wǎng)為例子，為大家講解下css sprites是如何實(shí)現(xiàn)的。如我們要在網(wǎng)頁上顯示“今日淘寶活動(dòng)”這個(gè)圖片。

代碼：

width：要定位圖片的寬度。height：要定位圖片的高度。（css sprites必須定義容器的大小，不然會顯示出錯(cuò)）

background：url（sprites.gif）背景圖片的路徑。 no-repeat：背景不重復(fù)。 -133px：X坐標(biāo)的位置 -153px：y坐標(biāo)的位置。

可能有人會不明白這個(gè)-133px 和-153px是怎么來的，這個(gè)坐標(biāo)是小圖片在大圖片中的x坐標(biāo)和y左邊坐標(biāo)，如下圖，紅色點(diǎn)的坐標(biāo)是在大圖上x坐標(biāo)為133px y坐標(biāo)為153px。（坐標(biāo)也可以用百分比表示，如：50% 50%）有人會提出，為什么坐標(biāo)是正數(shù)，你卻寫成了負(fù)數(shù)呢？因?yàn)橛胋ackground這種方式定義背景圖片，默認(rèn)x y坐標(biāo)是0 0。如下圖今日淘寶活動(dòng)圖片的坐標(biāo)是133px 153px，所以要用-133px -153px來歸零才能正確的顯示圖片。

css sprites的優(yōu)點(diǎn)：可以減少http的請求數(shù)，如10張單獨(dú)的圖片就會發(fā)出10次的http請求，合成為一張的大圖片，只會發(fā)出一次的http請求，從而提高了網(wǎng)頁加載速度。

css sprites的缺點(diǎn)：凡事有利必有弊端。可能有人喜歡，有人不喜歡，因?yàn)槊看螆D片改動(dòng)都要往這張圖片添加內(nèi)容，圖片的坐標(biāo)定位要很準(zhǔn)確會，會稍顯繁瑣。坐標(biāo)定位要固定為某個(gè)絕對值，因此會失去如center的一些靈活屬性。

css sprites有優(yōu)點(diǎn)也有缺點(diǎn)。要不要使用，具體要看網(wǎng)頁以加載速度為主還是以維護(hù)方便容易為主。