武林網(www.survivalescaperooms.com)文章簡介：Css Sprite，有時也稱為雪碧圖、精靈圖，是每一個前端開都會遇到的問題，也是常見的小圖片加載優化手段。相信各位同學都清楚其原理，具體就不贅述了。

Css Sprite，有時也稱為雪碧圖、精靈圖，是每一個前端開都會遇到的問題，也是常見的小圖片加載優化手段。相信各位同學都清楚其原理，具體就不贅述了。

之前一直有動機利用html5實現一個合成雪碧圖的工具，方便小項目的快速開發，減少一些諸如開photoshop、fireworks等工具來合圖的機械勞動，最近終于抽出時間將構思實現。

目前實現的功能如下：

使用的模版函數是John Resig的Micro-Templating，

可以用的變量有：

x、y、w、h的解釋如下圖：

css模版的設置操作如下圖：

點擊download按鈕即可完成下載：

這個功能是可以將你目前的工作狀態，包括圖片的數據（圖片、圖片位置排列），參數設置（包括主頁的參數設置與css模版設置），全部導出成一個文件，下次利用此文件便可復原工作狀態。

導出如下圖：

導入如下圖：

即可復原：