原文
大綱
1薄嫡、什么是CSS Sprite
2失仁、CSS Sprite的優(yōu)點
3胳泉、CSS Sprite的缺點
4拐叉、CSS Sprite的使用
1、什么是CSS Sprite
1.1扇商、CSS Sprites在國內(nèi)很多人叫css精靈凤瘦，是一種網(wǎng)頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去案铺，這樣一來蔬芥，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了控汉。對于當前網(wǎng)絡流行的速度而言笔诵，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題暇番。
1.2嗤放、加速的關鍵思喊，不是降低質量壁酬，而是減少個數(shù)。傳統(tǒng)切圖講究精細恨课，圖片規(guī)格越小越好舆乔，重量越小越好，其實規(guī)格大小無所謂剂公，計算機統(tǒng)一都按byte計算希俩。客戶端每顯示一張圖片都會向服務器發(fā)送請求纲辽。所以颜武，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大拖吼。
1.3鳞上、CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”吊档，“background- repeat”篙议，“background-position”的組合進行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。
2鬼贱、CSS Sprite的優(yōu)點
2.1移怯、利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能这难，這也是CSS Sprites最大的優(yōu)點舟误，也是其被廣泛傳播和應用的主要原因；
2.2雁佳、CSS Sprites能減少圖片的字節(jié)脐帝，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
2.3糖权、解決了網(wǎng)頁設計師在圖片命名上的困擾堵腹，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名星澳，從而提高了網(wǎng)頁的制作效率疚顷。
2.4、更換風格方便禁偎，只需要在一張或少張圖片上修改圖片的顏色或樣式腿堤，整個網(wǎng)頁的風格就可以改變。維護起來更加方便如暖。
3笆檀、CSS Sprite的缺點
3.1、在圖片合并的時候盒至，你要把多張圖片有序的合理的合并成一張圖片酗洒，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景枷遂；這些還好樱衷，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面酒唉，你的圖片如果不夠寬矩桂，很容易出現(xiàn)背景斷裂；
3.2痪伦、CSS Sprites在開發(fā)的時候比較麻煩侄榴，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活网沾，沒什么難度癞蚕，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發(fā)了一個CSS Sprites 樣式生成工具绅这，雖然還有一些使用上的不靈活涣达，但是已經(jīng)比photoshop測量來的方便多了，而且樣式直接生成，復制度苔，拷貝就OK匆篓！
3.3、CSS Sprites在維護的時候比較麻煩寇窑，如果頁面背景有少許改動鸦概，一般就要改這張合并的圖片，無需改的地方最好不要動甩骏，這樣避免改動更多的css窗市，如果在原來的地方放不下，又只能（最好）往下加圖片饮笛，這樣圖片的字節(jié)就增加了咨察，還要改動css。
3.4福青、CSS Sprites非常值得學習和應用摄狱，特別是頁面有一堆icon（圖標）∥尬纾總之很多時候大家要權衡一下利弊媒役，再決定是不是應用CSS Sprites。
4宪迟、CSS Sprite的使用
4.1酣衷、不要等到你完成切片之后才開始sprite.
如果你邊切圖邊寫CSS，然后等你完成了整個網(wǎng)站之后再來拼接這些圖片到一個Sprite中次泽，你就不得不完全重寫你的CSS穿仪，你也必須要花費很多的時間來用PS拼接大量的圖片。
4.2箕憾、將小圖片整合到一張大的圖片上,然后根據(jù)具體圖標在大圖上的位置牡借，給背景定位(background-position)拳昌。
