例如淘寶的css sprites
URL是http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif
這樣做有什麼好處呢？
顯而易見，瀏覽器在載入每一張圖片的時候都會發起一個HTTP請求。
如果使用CSS Sprites技術，將所有的圖片合成一張圖片，那麼，這樣多個HTTP請求會被合成一個HTTP請求。
這樣就既能大大降低後臺服務器的開銷，又能加快網頁載入速度。
CSS Sprites原理：
CSS Sprites是通過背景圖片外加背景圖片定位來實現的。現在做一個簡單的實驗：
我們以淘寶的圖片爲例，在html裏面插入一個div，寬高爲200px*100px，
a.將圖片的偏移設置爲
圖像顯示效果如下：
b.將圖片的偏移設置爲
圖像的顯示效果如下：
這樣，一個簡單的CSS Sprites就實現了。
CSS Sprites優點
CSS Sprites爲什麼突然跑火，跟能夠提升網站性能有關。顯而易見，這是它的巨大優點之一。
1.利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2.個人認爲CSS Sprites能減少圖片的字節，我曾經比較過多次3張圖片合併成1張圖片的字節總是小於這3張圖片的字節總和。
CSS Sprites缺點
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點。
1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好只夠的空間，防止板塊內不會出現不必要的背景，否則可能會出現出現干擾圖片的情況；這些還好，做痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2.CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；不過網上已經有高手開發出“CSS Sprites 樣式生成工具”，大家可以嘗試一下。
3.CSS Sprites在維護的時候比較麻煩，sprites是一般雙刃劍，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，有隻能(最好)往下加圖片，這樣圖片的字節就增加了，因爲每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣，而且重新算圖片的位置(尤其是這種上千px的圖)也是一件頗爲不爽的事情。當然，在性能的口號下，這些都是可以克服的。
4.由於圖片的位置需要固定爲某個絕對數值，這就失去了諸如center之類的靈活性。