一、CSS Sprites簡介

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

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

?

加速的關(guān)鍵，不是降低質(zhì)量，而是減少個數(shù)。傳統(tǒng)切圖講究精細，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機統(tǒng)一都按byte計算。客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求。所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

?

?

?

二、CSS Sprites 工作原理

?

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

?

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

?

?

三、CSS Sprites優(yōu)點

　　

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

?

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

?

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

?

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

?

?

四、CSS Sprites缺點

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

2、至于可維護性，這是一般雙刃劍。可能有人喜歡，有人不喜歡，因為每次的圖片改動都得往這個圖片刪除或添加內(nèi)容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當然，在性能的口號下，這些都是可以克服的。

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

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

?

?

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

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

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

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

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