css雪碧圖生成工具

css雪碧圖生成工具CSS sprite在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。是因?yàn)橐梢粋€(gè).sprite的文件，這個(gè)文件會(huì)存儲(chǔ)當(dāng)前你的雪碧圖需要的圖片信息，比如圖片名稱什么的，為了保證每次打開.sprite文件都有圖片。就智能拷貝一份圖片過來，要不然找不到

為什么要用這個(gè)工具

1.加快網(wǎng)頁加載速度

瀏覽器接受的同時(shí)請(qǐng)求數(shù)是10個(gè)，如果圖片過多會(huì)影響整體的視覺效果，而且對(duì)于不穩(wěn)定的網(wǎng)絡(luò)帶寬，加載起來更是噩夢(mèng)，所以把圖片拼接為一張大圖，從而加快加載速度，以及加速頁面渲染

2.后期維護(hù)簡(jiǎn)單

該工具可以直接通過選擇圖片進(jìn)行圖片的拼接，當(dāng)然你也可以自己挪動(dòng)里面的圖片，自己去布局你的雪碧圖，直接生成代碼，簡(jiǎn)單易用!

如何使用

1.用ps或者dw把需要的圖片切下來

2.打開CssSprite.exe

打開CssSprite.exe文件

3.打開圖片

點(diǎn)擊左上角按鈕打開圖片

現(xiàn)在版本中一次只能打開一種類型的圖片文件

4. .sprite文件

此次更新中新增了生成圖片的時(shí)候同時(shí)生成.sprite文件的功能，程序中可以通過點(diǎn)擊按鈕“打開.sprite”按鈕，選擇.sprite文件，還原雪碧圖原視圖

請(qǐng)務(wù)必保證.sprite與其中的圖片文件在同一文件夾內(nèi)

5.排布圖片

可以選擇上面的最上面按鈕今天橫豎的默認(rèn)排布，也可以鼠標(biāo)選中圖片拖動(dòng)位置，拖動(dòng)完成后程序會(huì)根據(jù)內(nèi)部圖片的位置生成面積最小的雪碧圖，當(dāng)然也會(huì)改變相應(yīng)的圖片位置

可以點(diǎn)擊+，-號(hào)圖片按鈕添加以及刪除圖片，目前只能操作單張的圖片。

6.代碼生成

在程序中可以生成sass代碼，以及css代碼，看自己需要嘛，自己選擇，選中“是否是手機(jī)端”的時(shí)候會(huì)把所有的尺寸除以2，因?yàn)槭謾C(jī)端往往會(huì)設(shè)計(jì)圖比較大，所以要縮放，建議生成圖片后再復(fù)制生成的代碼

7.保存雪碧圖

點(diǎn)擊“生成雪碧圖”按鈕，程序會(huì)默認(rèn)選中你在第3步的時(shí)候打開圖片的地址，然后點(diǎn)擊確定后生成雪碧圖。

生成的同時(shí)會(huì)生成.sprite文件

版本更新：

一、增加客戶端版本更新提醒

服務(wù)器端版本更新后，客戶端如果沒有更新要最新版本，會(huì)在標(biāo)題中提示，點(diǎn)擊更新按鈕出現(xiàn)版本更新的簡(jiǎn)單介紹

二、刪除多余的選擇背景顏色功能

雪碧圖在生成的時(shí)候其實(shí)大多數(shù)情況下是不需要指定背景顏色的，所以去掉這個(gè)累贅的功能

二、增加base64代碼生成

現(xiàn)在很多圖片都有base64的代碼，不過建議還是用grunt或者gulp來處理base64代碼的情況

三、增加單張圖片選中后上下左右按鍵移動(dòng)的功能

選中單張圖片后，點(diǎn)擊上下左右按鍵可進(jìn)行微調(diào)

四、增加選中多張圖片微調(diào)功能

鼠標(biāo)在畫布中拖動(dòng)會(huì)形成矩形選框，放開后會(huì)選擇框里的圖片，按下鍵盤上上下左右按鍵可使藍(lán)色選框以及藍(lán)色選框中的圖片對(duì)象同時(shí)移動(dòng)

css雪碧圖生成工具V3.0主要改進(jìn)

1.增加了單獨(dú)添加單張圖片以及刪除單張圖片的功能

2.增加了生成.sprite文件用以保存雪碧圖信息

3.增加了打開.sprite文件功能