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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用方法：

1、首先讀取圖片

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

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

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

【編輯推薦】

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