CSS Sprites在國內很多人叫css精靈，其實這個技術不新鮮，這個技術老到什么程度呢，我不敢確定，但是我看到最早的關于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》，時間是March 05, 2004 ，整整5年了，那時我還沒參加工作呢？
?
這個技巧已經廣泛的應用到現在的頁面的前端開發中，甚至YUI將他定為《提高網頁效率的14條準則》的第一條準則“Make Fewer HTTP Requests” ，可見這個技術的重要性，也正是YUI的推薦
使這個CSS技巧得到了廣泛的推廣和應用。
?
先來看個最簡單的DEMO：
這是背景圖片
這是一個簡單的CSS Sprites的demo:
?
XML/HTML代碼
看看頁面中的顯示！
?
CSS Sprites原理CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
?
CSS Sprites優點
1.利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2.個人認為能CSS Sprites能減少圖片的字節，我曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。
?
CSS Sprites缺點
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點
1.在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好只夠的空間，防止板塊內不會出現不必要的背景；這些還好，做痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2.CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用RIA開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！
3.CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無序改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，有只能(最好)往下加圖片，這樣圖片的字節就增加了，還要改的css。
CSS Sprites非常值得學習和應用，特別是頁面有一堆ico(圖標)。總之很多時候大家要權衡一下利弊，在決定是不是應用CSS Sprites。
擴展閱讀：
)
