雪碧圖？” “什麼東西？這個啊，這個不是CSS Sprite嗎？” 這個是我初到公司的時候和UI 的對話……
css sprite，很多人叫css精靈，這是一種網頁圖片應用處理方式。它的原理是將一個網頁或者一個模塊所用到的零碎的icon放在一張大圖裏，這樣當訪問該頁面時，加載的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
css sprite的製作過程
1.使用ps製作
首先測量一個單元模塊中所有Icond的大小，寬度，位置。新建一個透明空白頁面，然後將所有的透明的icon拖到空白頁面上，要準確的排版。每個icon中間最好隔着1px或者2px（這個距離也有缺點），足夠小的一排可以多放幾個，最好將一些變化的也放在一塊，將這個psd保存爲網頁所用格式就可以了。
如下圖,是京東的一張雪碧圖：
2.使用工具製作
騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，複製，拷貝就OK！
使用方法
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。如下格式：
background:url("圖片路徑") no-repeat -33px -3px;優缺點
優點：
1.能很好地減少網頁的http請求，從而大大的提高頁面的性能
2.能減少圖片的字節，曾經比較過多次3張圖片合併成1張圖片的字節總是小於這3張圖片的字節總和。
3.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
4.更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
缺點：
1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2.CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。
CSS Sprites非常值得學習和應用，特別是頁面有一堆icon。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。