CSS Sprites技術不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發表對該技術的 詳細闡述 。原先只在CSS玩家之間作為一種制作方法流傳，后來出來個 14 Rules for Faster-Loading Web Sites , 技術人員之間競相傳閱，其中第一條規則Make Fewer HTTP Requests就提到CSS Sprites。于是這個小妖精就火了起來，甚至出現了在線生成工具，勢不可擋也。近來國內很多blog都提到CSS Sprites，最著名的例子莫過于 http://huoche.7234.cn/images/jb51/gvarvu3zrco.png舉個例子，假如我們有這么一段代碼，max代表最大化，min代表最小化，我們需要給它們配上相應的漂亮圖片（這樣我們的網站才能夠吸引人，才可以賣錢，才可以到佛羅里達曬太陽:D）：

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

這兩個class都使用同一個圖片：

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

效果如下：

最大化最小化
最大化最小化
我們看到一團灰，沒錯，因為我們還沒有指定background-position，默認為 0 0，可以看下 sprite.png , 處于這個位置正是灰塊。好了，我們要找到代表最大化的加號和代表最小化的減號的位置找出來。經過測量，最大化按鈕位于Y軸的350px處，最小化按鈕位于Y軸400px處。想一想我們如何才能讓它們能夠顯示出來呢，明顯，要向上提升sprite.png，得到代碼如下：

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

耶，我們成功了：
最大化最小化
注意：為了舉例的方便，本例子直接在HTML內置樣式，切勿在實踐中的非特殊情況使用這種方式）。

優點

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

缺點

至于可維護性，這是一般雙刃劍?？赡苡腥讼矚g，有人不喜歡，因為每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當然，在性能的口號下，這些都是可以克服的。

由于圖片的位置需要固定為某個絕對數值，這就失去了諸如center之類的靈活性。

前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會出現出現干擾圖片的情況。這就是說，在一些需要非單向的平鋪背景和需要網頁縮放的情況下，CSS Sprites并不合適。YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放。