網(wǎng)站介紹

V2bo:在線(xiàn)Css Sprite生成工具是一款非常強(qiáng)大的在線(xiàn)css sprites工具，基于HTML5的canvas實(shí)現(xiàn)，支持自動(dòng)選取圖片css sprites，支持拼接圖片，能夠幫助前端工程師迅速生成所需要的css，支持單張圖片、拼接多張圖片，可以說(shuō)是前端開(kāi)發(fā)中最強(qiáng)大的CSS前端工具。

【該網(wǎng)站已停止運(yùn)營(yíng)，如有同類(lèi)站點(diǎn)可提交替換】

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

CSS Sprites 優(yōu)點(diǎn)：

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

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

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

4、更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。

通過(guò)打開(kāi)目前您的CSS文件夾下面的CSS圖片碎片后，您可以自行拖拽CSS圖片碎片技進(jìn)行適當(dāng)?shù)奈恢谜{(diào)整，可以通過(guò)雙擊圖片來(lái)移除該圖片，進(jìn)行CSS Sprite 操作時(shí)，拖拽與CSS Sprite 兩個(gè)選項(xiàng)可隨時(shí)切換使用。