你對CSS Sprites樣式生成工具的使用是否熟悉，這里和大家分享一下，CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式，相信本文介紹一定會讓你有所收獲。

CSS Sprites樣式生成工具(圖片定位坐標(biāo))

首先向大家先解釋下什么是CSS Sprites：

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

按照yahoo的rulesforhighperformancewebsites的原則，應(yīng)當(dāng)較少Client與Server端間的HTTPRequest次數(shù)。通過CSS Sprites方法將多張圖片組裝成單獨的一張圖片，可以有效減少HTTP請求的次數(shù)。

◆當(dāng)整幅圖片載入完成后，你就可以使用CSS方法通過設(shè)置背景位置的方式完成所需圖片的準(zhǔn)確調(diào)用。

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

明白可他是做什么的了吧？開始入正題了哈!

學(xué)CSS布局的同學(xué)應(yīng)該多少知道CSS Sprites（圖片合并）技術(shù)，簡單的說就是利用CSS的background-position屬性，控制顯示一張大圖片的顯示區(qū)域。例子可以看這里CSS Sprites的優(yōu)勢與切圖方法。

對于經(jīng)常使用CSS Sprites的同學(xué)，不知道是否有跟我一樣的煩惱，在寫定位的時候，先在PS里量出大概的位置，然后再在FF里用Firebug進(jìn)行微調(diào)，以達(dá)到實際需要的效果。

CSS Sprites樣式生成工具可以很好的解決這個問題，占用內(nèi)存小，運作快。

原文鏈接：http://www.cssforest.org/blog/index.php?id=133

下載地址：http://www.cssforest.org/blog/index.php?s=download

這里說明下，***下:bg2css_1.4.1.air這個安裝后在獲取新版本這樣就可以升級到***版本了嘿嘿！

工具的格式是：AIR，如果你直接打開，會被winRAR解壓，里看到的是一些網(wǎng)頁文件，也使用不了。

注意：需要AIR環(huán)境，可到Adobe站點下載安裝。

官方下載：http://get.adobe.com/cn/air/

◆在AIR環(huán)境下，安裝CSS Sprites樣式生成工具3.0

使用此工具，主要是想減少使用CSS Sprites技術(shù)時測量坐標(biāo)及填寫background-position定位這部分重復(fù)而枯燥的時間，提高工作效率。

使用方法：

1、首先讀取圖片

2、雙擊圖片，添加層，放大后，縮放層的區(qū)域大小。

3、點擊操作-預(yù)覽樣式，就可以得到您想的層樣式。

CSS Sprites樣式生成工具3.0幫助網(wǎng)站：http://www.cssforest.org/blog/index.php?id=133

【編輯推薦】

1. CSS Sprites簡介以及優(yōu)缺點
2. 十大CSS使用經(jīng)典技巧
3. CSS Sprites工作原理及優(yōu)缺點
4. 探究采用DIV+CSS框架的利與弊
5. DIV CSS網(wǎng)頁布局需要掌握的八大技巧