CSS中如何使用Sprites樣式生成工具，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

目前創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、卡若網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

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

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

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

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

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

明白可他是做什么的了吧？開(kāi)始入正題了哈!

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

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

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

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

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

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

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

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

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

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

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

使用方法：

1、首先讀取圖片

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

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

看完上述內(nèi)容，你們掌握CSS中如何使用Sprites樣式生成工具的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標(biāo)題：CSS中如何使用Sprites樣式生成工具
當(dāng)前鏈接：http://www.chinadenli.net/article38/jsihpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、Google、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)