使用TexturePacker一鍵生成CSS sprites

先來簡單介紹一下CSS sprites，這是幹嗎用的。衆所周知，咱們在設計網頁時，會有不少不少的網頁小元素，例如導航按鈕，社交圖標，網站背景圖等等。通常狀況下，這些圖片都是單獨形式存在的，對於每一張圖片，在網頁加載時都屬於獨立的http請求。但使用CSS sprites，則會將全部的小圖片整合到一張圖片中，網頁加載只須要對一張圖片進行請求，CSS再經過座標的形式定位每個小圖片顯示出來。這樣有什麼好處呢，我的認爲最大的好處是，大大減小http請求數，提升網頁加載速度。細心的朋友應該會發現小編的博客也使用了該技術。

CSS sprites是TexturePacker一大功能，你只要將全部網頁小圖片添加到TexturePacker，而後設置文件導出格式爲css，便可快速生成一張整合後的圖片和css文件，這對網頁前端設計師來講是不可多得的高效率工具。

固然文章在最前面也說過，TexturePacker的功能遠遠不止這些，你還能夠用它來生成程序所需的框架，如Cocos2d，Corona(TM) SDK ，Gideros ，Sparrow ，LibGDX，LimeJS 和Moai等。

下載TexturePacker：官方網站

http://www.codeandweb.com/texturepacker

http://www.codeandweb.com/physicseditor

http://twitter.com/CodeAndWeb