css sprite,css雪碧圖生成工具V3.0更新


V3.0主要改進

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

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

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

什么是css sprite

CSS sprite在國內很多人叫css精靈,是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

為什么要用這個工具

1.加快網頁加載速度

瀏覽器接受的同時請求數是10個,如果圖片過多會影響整體的視覺效果,而且對於不穩定的網絡帶寬,加載起來更是噩夢,所以把圖片拼接為一張大圖,從而加快加載速度,以及加速頁面渲染

2.后期維護簡單

該工具可以直接通過選擇圖片進行圖片的拼接,當然你也可以自己挪動里面的圖片,自己去布局你的雪碧圖,直接生成代碼,簡單易用

3.開源

該程序已經在github上開源,地址:https://github.com/iwangx/sprite ,去構建屬於你自己的雪碧圖生成工具吧

csdn下載地址(不要分)

http://download.csdn.net/detail/wx247919365/8660503

如何使用

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

2.打開CssSprite.exe

打開CssSprite.exe文件

3.打開圖片

點擊左上角按鈕打開圖片

現在版本中一次只能打開一種類型的圖片文件

4. .sprite文件

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

請務必保證.sprite與其中的圖片文件在同一文件夾內

5.排布圖片

可以選擇上面的最上面按鈕今天橫豎的默認排布,也可以鼠標選中圖片拖動位置,拖動完成后程序會根據內部圖片的位置生成面積最小的雪碧圖,當然也會改變相應的圖片位置

可以點擊+,-號圖片按鈕添加以及刪除圖片,目前只能操作單張的圖片。

6.代碼生成

在程序中可以生成sass代碼,以及css代碼,看自己需要嘛,自己選擇,選中“是否是手機端”的時候會把所有的尺寸除以2,因為手機端往往會設計圖比較大,所以要縮放,建議生成圖片后再復制生成的代碼

7.保存雪碧圖

點擊“生成雪碧圖”按鈕,程序會默認選中你在第3步的時候打開圖片的地址,然后點擊確定后生成雪碧圖。

生成的同時會生成.sprite文件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM