合成雪碧图Sprite工具

1.国外的在线合成工具：

选择需要合并的文件----设置option选项（包括：元素的间距，排列方式，背景颜色，边框）-----点击generate按钮生成

优点：自动合成，可以设置属性。缺点：文件必须一个个地去选择导入，不能够批量导入。

 

2.腾讯的雪碧图在线生成工具

个人觉得操作不太方便，好像有些功能失灵了，相关操作说明如下：

 

3.SpriteMe

这是一个国外的在线工具，它能够帮你分析页面中有哪些地方可以进行雪碧图的优化，并且能够生成对应的雪碧图。

使用方法：

打开连接，看到下图内容，然后把SpriteMe拖拽到你的浏览器书签中（就是要你保存为书签嘛）

然后随便打开一个页面。例如打开360导航页面吧，。然后在该页面上打开你的书签找到SpriteMe并点击它。

你会看到生成这样一个结果。这是SpriteMe的检测结果，对这个页面给出的雪碧图优化建议。鼠标移到每个链接上都能看到自动合成的效果，点击右边的make sprite可以马上生成雪碧图。点击export css可以生成雪碧图的样式。

 

4.如果你是写sass的话，那么可以安装compass。使用compass来自动把切片合成雪碧图并生成样式。

 

5.如果你是写sass或者less的话，比较建议使用grunt自动工具来一体化地编译、压缩、合并文件，而且能够自动合成雪碧图、生成样式文件。

使用grunt来合成雪碧图需要使用grunt-sprite这个插件（好像在github上也有另一个类似的插件）,同时需要安装 和  两个依赖。

至于如何使用，这里有个详细的说明：