合成雪碧圖Sprite工具
1.國外的在線合成工具:http://csssprites.com/
選擇需要合并的文件----設置option選項(包括:元素的間距,排列方式,背景顏色,邊框)-----點擊generate按鈕生成
優點:自動合成,可以設置屬性。缺點:文件必須一個個地去選擇導入,不能夠批量導入。
HTML工具,?
2.騰訊的雪碧圖在線生成工具http://alloyteam.github.io/gopng/
個人覺得操作不太方便,好像有些功能失靈了,相關操作說明如下:https://github.com/AlloyTeam/gopng
?
3.SpriteMe
js和css壓縮工具、這是一個國外的在線工具,它能夠幫你分析頁面中有哪些地方可以進行雪碧圖的優化,并且能夠生成對應的雪碧圖。http://spriteme.org/
使用方法:
打開連接http://spriteme.org/,看到下圖內容,然后把SpriteMe拖拽到你的瀏覽器書簽中(就是要你保存為書簽嘛)
然后隨便打開一個頁面。例如打開360導航頁面吧,http://www.3600.com/?src=lm&ls=n020f881c88。然后在該頁面上打開你的書簽找到SpriteMe并點擊它。
你會看到生成這樣一個結果。這是SpriteMe的檢測結果,對這個頁面給出的雪碧圖優化建議。鼠標移到每個鏈接上都能看到自動合成的效果,點擊右邊的make sprite可以馬上生成雪碧圖。點擊export css可以生成雪碧圖的樣式。
div+css網頁設計?
?
4.如果你是寫sass的話,那么可以安裝compass。使用compass來自動把切片合成雪碧圖并生成樣式。
?
5.如果你是寫sass或者less的話,比較建議使用grunt自動工具來一體化地編譯、壓縮、合并文件,而且能夠自動合成雪碧圖、生成樣式文件。
使用grunt來合成雪碧圖需要使用grunt-sprite這個插件(好像在github上也有另一個類似的插件),同時需要安裝Graphics Magick(gm)?和?PhantomJS?兩個依賴。
前端開源模板、至于如何使用,這里有個詳細的說明:https://github.com/hellometers/grunt-sprite
?