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文件