一、CSS Sprites簡(jiǎn)介

通常被意譯為“CSS圖像拼合”或“CSS貼圖定位”。CSS Sprites并不是一門新技術(shù)，目前它已經(jīng)在網(wǎng)頁開發(fā)中發(fā)展得較為成熟，CSS Sprites并不是什么金科玉律，但在很多情況下，它有著一定的優(yōu)勢(shì)，最重要的是它可以減輕服務(wù)器的負(fù)載，提高網(wǎng)頁加載速度。

CSS Sprites允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無需顧忌這個(gè)問題。

?

加速的關(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ù)越多，造成延遲的可能性也就越大。

?

?

?

二、CSS Sprites 工作原理

?

CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，在需要用到圖片的時(shí)候，通過CSS屬性background-image組合background-repeat, background-position等來實(shí)現(xiàn)。

?

通過調(diào)整background-position的數(shù)值，背景圖片就能以不同的面貌出現(xiàn)在你眼前。其實(shí)圖片整體面貌沒有變，由于圖片位置的改變，你看到只 該看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因?yàn)樗膒osition往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應(yīng)該看到的部分。

?

?

三、CSS Sprites優(yōu)點(diǎn)

　　

1、利用CSS Sprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；

?

2、CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

?

3、解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。

?

4、更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。

?

?

四、CSS Sprites缺點(diǎn)

1、在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂；

2、至于可維護(hù)性，這是一般雙刃劍?？赡苡腥讼矚g，有人不喜歡，因?yàn)槊看蔚膱D片改動(dòng)都得往這個(gè)圖片刪除或添加內(nèi)容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當(dāng)然，在性能的口號(hào)下，這些都是可以克服的。

3、由于圖片的位置需要固定為某個(gè)絕對(duì)數(shù)值，這就失去了諸如center之類的靈活性。

4、前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會(huì)出現(xiàn)出現(xiàn)干擾圖片的情況。這就是說，在一些需要非單向的平鋪背景和需要網(wǎng)頁縮放的情況下，CSS Sprites并不合適。YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放。

?

?

五、CSS Sprites圖片切割術(shù)

1、CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數(shù)字組合形式定位，這樣能減少維護(hù)帶來的不必要麻煩。
2、不建議CSS Sprites圖片中保持一定的間距，因?yàn)槲募ize增大而增加文件體積。

3、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數(shù)，因?yàn)樯偕珨?shù)的圖片文件體積會(huì)相對(duì)的小。
4、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數(shù)情況會(huì)增大了體積，所以CSS Sprites的圖片不要有空隙。

5、在size相同的CSS Sprites圖片中，垂直排列的圖片會(huì)比水平排列的文件體積要大。
6、在CSS Sprites圖片中，水平排列的圖片會(huì)比垂直排列的文件體積要大。

7、圖片對(duì)等合并：應(yīng)用CSS Sprites圖片時(shí)，適當(dāng)?shù)匕褜?duì)等相同的圖像合并，以節(jié)省空間及減少體積。
8、區(qū)分開不需要合并的圖像：如當(dāng)前用戶確定只顯示一種狀態(tài)或一個(gè)級(jí)別時(shí)，不必要把其他的級(jí)別或狀態(tài)的圖片合并。
9、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動(dòng)位置最適宜擺放文本前的icon，因此不會(huì)受到其它CSS Sprites圖片干預(yù)，也不需要預(yù)留一定的行寬。