CSS sprites 的樣式生成工具哪裡有？

01-15

很崩潰的，翻遍網路找不到！

推薦 CssGaga，一款自動化網頁設計工具集合軟體，其中包含了你說的css spite(即工具AutoSprite功能)。此工具由web前端工程師@ytzong開發，現已通過多位騰訊系web前端工程師長時間的考察試用，軟體隨時更新升級，品質有保障。

地址：http://www.99css.com/archives/542

我都是自己拿ps做的

樓上的都弱爆了，這個才是最牛叉的css sprite工具http://css.v2bo.com

fireworks……

也許 http://csssprites.com/ 這個網站你可以試試，只要把圖片傳上去，然後他就會自動生成你想要的，並且給你css樣式！希望對你有幫助

1.目前在用的是：cssgaga，絕對好用，

sprites的圖片放在指定的文件夾下，更新sprites圖片只要更新對應的圖片，重新用cssgaga生成圖片即可，日後維護非常方便；

另一個優點：樣式可以模塊化處理，支持 @import 在css文件中直接導入模塊文件，如下圖：

下載地址：http://cssgaga.googlecode.com/svn/trunk/upload/CssGaga.zip

3. cssgaga的其他功能也很不錯的，自動添加時間戳，自動檢測關聯性，監控文件變化自動重新生成等

當然，cssgaga目前滿足不了上站自動化的需求，

比如我想在開發階段用未經cssgaga處理的css，上站後，自動調用cssgaga處理過的css文件，

目前用grunt部署工具，但是在css壓縮這塊，還是用cssgaga手動處理一下；cssgaga作者要是有提供開放介面，在grunt的時候自動生成該多好；

2. grunt-sprite

grunt也有關聯的css 處理工具，但是好像還沒有找到符合自己需求的插件，

hellometers/grunt-sprite · GitHub

目前打算用下這個，看下是否能夠滿足需求；

peaches ，為css sprite 而生！

http://github.com/sliuqin/peaches

都是手寫加photoshop的選區工具（M）拉坐標，看信息面板的數值記錄的。css sprete圖也是自己用ps拼接，很方便。

我也來推薦幾個，可惜都是老外做的

可以學習下面幾個框架中其一，樣式寫的非常漂亮，可以從中複製，適當修改，就成自己的。

更多的關於css的知識，關注

http://joycss.org

鵝廠的GoPng(AlloyTeam/gopng · GitHub)，是用html5寫的，免安裝，還能定製CSS模板，足夠我用了。

當然是cssGaga，不過沒有gulp插件比較遺憾啊

請搜索Css Sprite Tools，一個圖片拼合定位工具，可自動生成 Css Sprite樣式。

前端開發輔助工具

雖然已經有了不少同類的工具。但我最近無聊，也寫了個CssSprites工具，可以在線使用。可以保存工程，還可以直接引用該工具生成的css文件地址，不需要下載和導出，方便開發。開發完成再導出省事兒。

Sass+Compass

Ensighten/spritesmith · GitHub 有 Grunt 和 Gulp 的插件，也有 CLI 工具。但是 CLI 工具貌似不支持 retina 的，可以自己再寫腳本把裡面的參數都除以 2。

我基於此做的一個工具：GitHub - differui/ruhua: Generate and minify CSS sprite images.。

貌似都無法自動化解決需要repeat的背景圖片

Mod有合圖插件，基於Nodejs，騰訊品質 https://github.com/modulejs/modjs

css-sprite，現在叫sprity，很強大，只不過環境比較難部署。

compass，也很不錯，不過我不喜歡，因為有個坑，布局smart的時候，間距會失效。

美工