2005 年的時(shí)候 CSS 禪意花園 (CSS Zengarden) 的園主 Dave Shea 對(duì) CSS Sprites 技術(shù)的作過(guò)詳細(xì)介紹。CSS Sprites 技術(shù)提倡把所有背景圖片合并到一個(gè)圖片文件中，并使用 CSS 的 background-image 和 background-position 屬性來(lái)定位和調(diào)用。

這種方法看似繁瑣，但卻是非常有實(shí)用價(jià)值的。

首先，CSS Sprites 能較少 HTTP 請(qǐng)求次數(shù)。
我們知道，HTTP 請(qǐng)求數(shù)對(duì)網(wǎng)站的工作性能有較大關(guān)聯(lián)。如果背景圖分開(kāi)存放，每一次調(diào)用都會(huì)產(chǎn)生 HTTP 請(qǐng)求，一定程度上增加了服務(wù)器的負(fù)擔(dān)。而單個(gè)背景圖的設(shè)計(jì)方法，只需請(qǐng)求一次即可取回背景圖片。很多大型網(wǎng)站，包括雅虎，新浪等，都采用了 CSS Sprites 技術(shù)。

其次，CSS Sprites 能防止背景圖片延遲加載。
有時(shí)在點(diǎn)擊以圖片作背景的按鈕時(shí)會(huì)發(fā)現(xiàn)，鼠標(biāo)懸停的時(shí)刻才會(huì)觸發(fā)瀏覽器下載背景圖片，這是非常差勁的用戶(hù)體驗(yàn)。但如果將圖片存放與單個(gè)文件，就能避免延遲加載。因?yàn)樵诖蜷_(kāi)網(wǎng)頁(yè)的首次請(qǐng)求中，圖片已經(jīng)加載完畢。

然而，使用單個(gè)圖片文件存放的方法會(huì)降低可維護(hù)性。而且圖片的定位比較繁瑣，缺乏靈活性。在雅虎開(kāi)發(fā)小組的 YUI 產(chǎn)品中，采用了加大圖片距離的方法，同時(shí)也增加了圖片的體積。

總之，CSS Sprites 有利也有弊。在追求性能的前提下，CSS Sprites 是值得推廣的網(wǎng)頁(yè)設(shè)計(jì)方法。

本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://m.absorbed3d.com/