CSS Sprites在國(guó)內(nèi)很多人叫css精靈，其實(shí)這個(gè)技術(shù)不新鮮，這個(gè)技術(shù)老到什么程度呢，我不敢確定，但是我看到最早的關(guān)于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》，時(shí)間是March 05, 2004 ，整整5年了，那時(shí)我還沒(méi)參加工作呢？

?

這個(gè)技巧已經(jīng)廣泛的應(yīng)用到現(xiàn)在的頁(yè)面的前端開(kāi)發(fā)中，甚至YUI將他定為《提高網(wǎng)頁(yè)效率的14條準(zhǔn)則》的第一條準(zhǔn)則“Make Fewer HTTP Requests” ，可見(jiàn)這個(gè)技術(shù)的重要性，也正是YUI的推薦

使這個(gè)CSS技巧得到了廣泛的推廣和應(yīng)用。

?

先來(lái)看個(gè)最簡(jiǎn)單的DEMO：

這是背景圖片

這是一個(gè)簡(jiǎn)單的CSS Sprites的demo:

?

XML/HTML代碼

這里顯示紅叉??這里顯示綠勾??這里顯示紅叉??這里顯示綠勾??

看看頁(yè)面中的顯示！

?

CSS Sprites原理CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

?

CSS Sprites優(yōu)點(diǎn)

1.利用CSS Sprites能很好地減少了網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高了頁(yè)面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；

2.個(gè)人認(rèn)為能CSS Sprites能減少圖片的字節(jié)，我曾經(jīng)比較過(guò)多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

?

CSS Sprites缺點(diǎn)

誠(chéng)然CSS Sprites是如此的強(qiáng)大，但是也存在一些不可忽視的缺點(diǎn)

1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好只夠的空間，防止板塊內(nèi)不會(huì)出現(xiàn)不必要的背景；這些還好，做痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)?#xff0c;很容易出現(xiàn)背景斷裂；

2.CSS Sprites在開(kāi)發(fā)的時(shí)候比較麻煩，你要通過(guò)photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線(xiàn)活，沒(méi)什么難度，但是很繁瑣；幸好騰訊的鬼哥用RIA開(kāi)發(fā)了一個(gè)CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測(cè)量來(lái)的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！

3.CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，無(wú)序改的地方最好不要?jiǎng)?#xff0c;這樣避免改動(dòng)更多的css，如果在原來(lái)的地方放不下，有只能(最好)往下加圖片，這樣圖片的字節(jié)就增加了，還要改的css。

CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁(yè)面有一堆ico(圖標(biāo))。總之很多時(shí)候大家要權(quán)衡一下利弊，在決定是不是應(yīng)用CSS Sprites。

擴(kuò)展閱讀：

總結(jié)

以上是生活随笔為你收集整理的html css精灵,谈谈CSS Sprites(css精灵)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。