CSS Sprites是最初的時候被直譯為“CSS小鬼”、“CSS妖精”，后來慢慢的被意譯為“CSS圖片合并”、“圖像拼合”等，個人覺得CSS圖片合并比較貼切CSS Sprites并不是一門新技術，而只是一種高級CSS技巧，它有著一定的優(yōu)勢，最重要的是它可以減輕服務器的負載，提高網(wǎng)頁加載速度。

要學習和使用CSS Sprites并不難，需要的是耐心。如果你有這個耐心，就好好看看本文對CSS圖片合并技術的詳解.

什么是CSS Sprites？

2000年開始，Web設計向著精致、巧妙的方向發(fā)展。設計師們開始考慮使用非javascript的方 式制作鼠標滑過、懸停菜單的效果，這時CSS Sprites應運而生，它基于同上文提到的游戲Sprite同樣的原理，并且使用CSS更容易控制，很快的流行開來。

2004年，Dave Shea 提出了一種使用CSS控制組合圖片的方案 ，將許過小的圖片組合在一起，使用css定義背景屬性，來控制圖片的顯示位置和方式。

當頁面加載時，不是加載每個但以圖片，而是一次加載整個組合圖片。這是一個了不起的改進，它大大減少了HTTP請求的次數(shù)，減輕服務器壓力，同時縮短了懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。

CSS Sprites用在哪里？

CSS圖片合并可以用在很多場合，大字那個網(wǎng)站可以將許多單獨的圖片，以有機的方式組合起來，從而使其便于維護和更新。圖片之間通常會留出較大的空白，使 得圖片不會影響網(wǎng)頁的內(nèi)容。但同時CSS Sprite大多使用于較固定的像素定位中，它的彈性較差，收到定位等因素的制約。所以，你需要在可維護性vs降低負載之間權衡利弊，選擇最適合你的項目 的方式。

下面是一些CSS Sprites的使用范例：

Apple
蘋果網(wǎng)站使用CSS圖片合并來制作導航菜單的鼠標懸停效果：

Google
Google使用了極其簡化的方案：

CSS圖片合并常用來合并頻繁使用的圖形元素，如導航、LOGO、分割線、RSS圖標、按鈕等。通常它們不會作為網(wǎng)頁內(nèi)容出現(xiàn)，因為涉及內(nèi)容的圖片并不是每個頁面都一樣。