概述

Web前端需要做的漂亮，必定引入很多圖片和圖標(biāo)來美化界面，但是嵌入式設(shè)備Flash有限，總共就那么幾M空間，可用于Web資源存放區(qū)域很受限制，本文記錄一種用于Web前端的圖片壓縮與合并方法，將多個(gè)制作好的圖片和圖標(biāo)合并到一張圖片中，既減小了占用Flash大小，又使得瀏覽器一次加載便可加載到所有圖片

CSS Sprite Generator

要使用一個(gè)在線圖片壓縮合并工具，CSS Sprite Generator，鏈接地址：http://spritegen.website-performance.org/
進(jìn)入后在網(wǎng)頁左上方一片區(qū)域，有open、Setting、Clear、Downloads和About，點(diǎn)擊open打開所需合并的圖片，該工具會(huì)自動(dòng)優(yōu)化對齊

做一個(gè)例子，如下圖加載進(jìn)來一些圖片后，會(huì)自動(dòng)對齊

點(diǎn)擊其中一個(gè)圖標(biāo)，在右側(cè)的設(shè)置區(qū)域可看到其坐標(biāo)

這坐標(biāo)怎么用？回到左邊的區(qū)域，點(diǎn)擊Downloads，右邊區(qū)域會(huì)更改為下載選擇，點(diǎn)擊spritesheet會(huì)下載合并后的圖片，點(diǎn)擊stylesheet會(huì)下載所有圖標(biāo)的樣式，如下圖是合并后的圖片

stylesheet樣式文件內(nèi)容如下

.sprite?{
????background-image:?url(spritesheet.png);
????background-repeat:?no-repeat;
????display:?block;
}

.sprite-icon-delete-normal?{
????width:?50px;
????height:?50px;
????background-position:?-5px?-5px;
}

.sprite-icon-modify-normal?{
????width:?50px;
????height:?50px;
????background-position:?-5px?-65px;
}

每個(gè)圖標(biāo)有width、height和background-position三個(gè)屬性，這其實(shí)就是對應(yīng)css樣式，可按如下格式建立一個(gè)刪除圖標(biāo)的樣式

.icon-delete-normal?{
????width:50px;
????height:50px;
????overflow:?hidden;
????background-repeat:?no-repeat;
????background-image:?url('../img/spritesheet.png');
????background-position:?-5px?-5px;
}

其中url中為從這個(gè)工具下載的spritesheet合并圖片，HTML中就可以使用

......>來完全顯示該圖標(biāo)了