CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea就在ALA發(fā)表對該技術(shù)的詳細(xì)闡述。原先只在CSS玩家之間作為一種制作方法流傳，后來出來個14 Rules for Faster-Loading Web Sites, 技術(shù)人員之間競相傳閱，其中第一條規(guī)則Make Fewer HTTP Requests就提到CSS Sprites。于是這個小妖精就火了起來，甚至出現(xiàn)了在線生成工具，勢不可擋也。近來國內(nèi)很多blog都提到CSS Sprites，最著名的例子莫過于 http://huoche.7234.cn/images/jb51/dnr2if1gsie.png舉個例子，假如我們有這么一段代碼，

max

min

<div class="max">最大化</div>
<div class="min">最小化</div>

這兩個

class

.min, .max {
width:16px;
height:16px;
background-image:url(http://huoche.7234.cn/images/jb51/xckfbiddthv.png);
background-repeat: no-repeat; /*我們并不想讓它平鋪*/
text-indent:-999em; /*隱藏文本的一種方法*/
}

效果如下：

最大化
最小化

我們看到一團(tuán)灰，沒錯，因?yàn)槲覀冞€沒有指定

background-position

0 0

.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}

耶，我們成功了：

最大化
最小化

（注意：為了舉例的方便，本例子直接在HTML內(nèi)置樣式，切勿在實(shí)踐中的非特殊情況使用這種方式）。

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

我們從前面了解到，CSS Sprites為什么突然跑火，跟能夠提升網(wǎng)站性能有關(guān)。顯而易見，這是它的巨大優(yōu)點(diǎn)之一。普通制作方式下的大量圖片，現(xiàn)在合并成一個圖片，大大減少了HTTP的連接數(shù)。HTTP連接數(shù)對網(wǎng)站的加載性能有重要影響。

缺點(diǎn)

至于可維護(hù)性，這是一般雙刃劍。可能有人喜歡，有人不喜歡，因?yàn)槊看蔚膱D片改動都得往這個圖片刪除或添加內(nèi)容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當(dāng)然，在性能的口號下，這些都是可以克服的。