原文
大綱
1、什么是CSS Sprite
2、CSS Sprite的優(yōu)點(diǎn)
3、CSS Sprite的缺點(diǎn)
4、CSS Sprite的使用
1、什么是CSS Sprite
1.1、CSS Sprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無需顧忌這個(gè)問題。
1.2、加速的關(guān)鍵，不是降低質(zhì)量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算?？蛻舳嗣匡@示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求。所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。
1.3、CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。
2、CSS Sprite的優(yōu)點(diǎn)
2.1、利用CSS Sprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
2.2、CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
2.3、解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。
2.4、更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。
3、CSS Sprite的缺點(diǎn)
3.1、在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂；
3.2、CSS Sprites在開發(fā)的時(shí)候比較麻煩，你要通過photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發(fā)了一個(gè)CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測(cè)量來的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！
3.3、CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片，無需改的地方最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。
3.4、CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁面有一堆icon（圖標(biāo)）?？傊芏鄷r(shí)候大家要權(quán)衡一下利弊，再?zèng)Q定是不是應(yīng)用CSS Sprites。
4、CSS Sprite的使用
4.1、不要等到你完成切片之后才開始sprite.
如果你邊切圖邊寫CSS，然后等你完成了整個(gè)網(wǎng)站之后再來拼接這些圖片到一個(gè)Sprite中，你就不得不完全重寫你的CSS，你也必須要花費(fèi)很多的時(shí)間來用PS拼接大量的圖片。
4.2、將小圖片整合到一張大的圖片上,然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位(background-position)。
