CST CSS圖片拼合定位工具(Css Sprite Tools)

Css Sprite Tools的用途是將css中定義的小背景圖片合并為一張大的背景圖，從而減少服務器的Http連接數(shù)，對提高網(wǎng)站的吞吐量有一定幫助。你可以在生成的背景圖基礎(chǔ)上按自己的具體需求修改樣式表文件，或?qū)�樣式表中的樣式合并到你已有的css文件中。

軟件介紹：

Css Sprite Tools允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網(wǎng)絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。加速的關(guān)鍵，不是降低質(zhì)量，而是減少個數(shù)。傳統(tǒng)切圖講究精細，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機統(tǒng)一都按byte計算。客戶端每顯示一張圖片都會向服務器發(fā)送請求。所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

Css Sprite Tools(css sprites 樣式生成工具)其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites原理

CSSSprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites優(yōu)點

利用CSS Sprites能很好地減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應用的主要原因；　　CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和�！　〗鉀Q了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網(wǎng)頁的制作效率�！　「鼡Q風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風格就可以改變。維護起來更加方便。

CSS Sprites缺點

誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點　　在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)不會出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠?qū)�，很容易出現(xiàn)背景斷裂；　　CSSSprites在開發(fā)的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用RIA開發(fā)了一個CSS Sprites樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！　　CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動css�！　�CSS Sprites非常值得學習和應用，特別是頁面有一堆ico（圖標）�？傊�很多時候大家要權(quán)衡一下利弊，再決定是不是應用CSS Sprites。