一個(gè)網(wǎng)站，由許多元素構(gòu)成，如：文本、圖像、鏈接、表單、表格等，除了文本，圖像當(dāng)屬重中之重了！在早先的

網(wǎng)站設(shè)計(jì)中，圖片都是獨(dú)立分開(kāi)的；到了2004年，Dave Shea(css禪意花園作者)提出了使用css控制組合圖片的方案，將許

多小的圖片合成于一張畫(huà)布里，再通過(guò)background-position進(jìn)行定位，來(lái)控制圖片的顯示位置和方式。

一時(shí)間，該方案得到人們的推崇，并將其稱(chēng)為css Sprite技術(shù)，中文意思大概就是“css貼圖定位”或“css圖像拼合”。

那么，為什么要用該技術(shù)呢？它的優(yōu)勢(shì)在哪里？存在哪些缺點(diǎn)呢？

首先，從網(wǎng)站的優(yōu)化方面考慮。將許多圖片拼合成一張圖片，在加載時(shí)就不是對(duì)之前的每張圖片進(jìn)行加載了，而

是

只要對(duì)拼合成的圖片加載一次就夠了，這就大大減少了http請(qǐng)求的次數(shù)，降低了服務(wù)器的負(fù)載；

其次，從css的維護(hù)方面考慮。圖片多了，就得為每張圖片命名，命名并不是一件很輕松的事情，有時(shí)候可以把人

搞得焦頭爛額，而把眾多的圖片合成起來(lái)，只要為組合圖片一次命名，省卻許多的時(shí)間；另外，在樣式表里書(shū)寫(xiě)代碼時(shí)，可

以將樣式進(jìn)行分離，只進(jìn)行一次圖片應(yīng)用，而其他的都只是定位的問(wèn)題了，提升了代碼的精簡(jiǎn)。

它的缺點(diǎn)同樣要從css的維護(hù)方面來(lái)說(shuō)，因?yàn)閏ss sprite大多使用于較固定的像素定位中，而一用到定位，布局上

就是固定住了，降低了網(wǎng)頁(yè)的彈性。

所以，在用該技術(shù)時(shí)，應(yīng)該在可維護(hù)性和降低負(fù)載之間權(quán)衡利弊，選擇適合項(xiàng)目的方式。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄