另一个好用的CSS Sprites工具（CSS雪碧）可在线引用

至于为什么要使用CSS Sprites（雪碧图）技术，有很多文章都有说明。至于优点和缺点，还真不好说，因为好与坏都是相对的。

简单了解可以参考：http://jingyan.baidu.com/article/ac6a9a5e4b34262b653eac15.html

姑且说CSS Sprites是一种技术，不如说是一种优化手段更为准确。因为其原理也很简单，手段也并不复杂。

虽然手段确实很简单，只需要把小图合并成一张大图，在测量好位置和大小，写上对应的css样式就行了。但是这个过程若是重复多次，便显得有点繁琐了。而我恰好又是个特别懒的人，于是便去网上搜寻相关工具。

话说有关CssSprites的工具网上还是有不少的，有的很挺好用。但是依然无法满足我平时的开发需求。为什么呢？因为我们经常改图改需求，往往使用工具生成好了雪碧图，在需求更改时必须得重新合成制作。当然直接在原有的基础上添加css 和追加新图片是可行的。但是毕竟还是多了很多工作，这样对于我来说是根本不能满足的。

于是我便任性的自己写了一个工具。

先看一看界面吧：

为了方便在线制作保存，以及以后的修改。我写了一个简单的用户系统，可以保存用户的工程，方便随时修改。

登录之后是这样（会弹出打开项目的对话框，也可以创建一个项目）：

“项目名”对应最终生成的css样式的前缀；

“图片路径”对应最终导出的css文件中对图片的引用路径（也就是最终合成的图片要防止的位置）

“项目描述”是对这个项目的说明，按照自己的情况写就行了

这里我填写的是：

创建成功后，点击（添加图片）。把事先切好的图标添加到工作空间中。

要添加的文件（请确保文件已经正确命名，因为最终生成的样式中是以文件名为准的）：

添加到工作区之后：

添加完成后或许所有的图片是叠在一起，乱作一团的，没关系。我们可以用鼠标框选所有的图标。使用蓝色工具条对图片进行自动排列，当然也可以自己用鼠标或者键盘光标进行手动摆放。

这里我们不妨试一试先框选需要排列的图片，点击面积降序，点击垂直排列。如下

当然，这种排列方式依然不够好，我们可以自行使用其他排列方式进行排列。如下这种方式较为合适。

好了，简单排列一下就可以了。别忘了点击保存

经过简单的操作，CSS Sprites就制作好了，但是我们应该怎么使用呢？

不妨点击导出按钮。于是便可看到下面的对话框：

点击“保存图片”便可以看到最终合成的图片。您可以将其保存在自己的项目目录中。

点击“保存CSS”便可以看到最终生成的CSS文件，您也可以将其保存在自己的项目目录中，以便在项目中引用。

点击“在线预览”可以看到最终生成的CSS文件，与“保存CSS”不同之处在于，此CSS文件中使用到的图片路径并不是在创建项目时指定的，而是项目自动生成的在线地址，因此不需要您事先保存合成好的图片，直接在项目中引用该文件便可生效。简化了使用的繁琐过程。这对于开发过程来说，无疑是非常方便的。因为每个项目对于的在线预览地址是唯一的，意味着您在项目中使用了这个地址，在您修改了CSS Sprites工程并保存了之后，您无需修改这个地址。

下面我们介绍一下在项目中使用的方法：

1、建立我们自己的网址项目。打开一个要使用css Sprites的页面。如：

2、在CSS Sprites工具中点击导出-在线预览

复制该文件的地址：

3、在网页中引用此CSS文件：

4、在页面中直接使用图片样式：

注意：样式名的格式是“项目名-图片文件名”

我们可以在css Sprites工具的工作区选中某个图片

状态栏下面会有具体的样式名：

使用的过程就是这么简单。但我建议在项目正式发布的时候，请将图片保存到您的项目目录中，也将css文件保存到您的项目目录中，页面上引用的css文件也换成保存好的css文件。因为使用在线css文件，我不能保证服务器的稳定性，以及数据的永久性。因此，如果您在正式发布时使用了生成的在线地址，如有任何问题和意外，我不会承担任何责任。

因为这只是一个工具，方便了各位前端开发者。

最后再次附上工具的地址：

http://lazytools.sinaapp.com