用TexturePacker将css图片合并到一个图片中

       今天打开电脑，收到一封Andreas Loew发来的邮件，并给我发来了TexturePacker3.0和PhysicsEditor的License, 很是感动了一番，这两个工具可是我期待以久的，可惜现在资金有限，一直没舍得买，为了感谢Andreas Loew的慷慨，我以后得多写几篇这个工具的使用心得。

       我目前从事前端开发工作，从毕业到现在，经历过很多公司，基本都是创业型的公司，这些公司在前端开发方面基本没有什么经验积累，当然进来的开发人页也没什么大牛之类的人物，今天只说css部分，其实我很早看到过各大网站都在使用css sprite技术，但当时我以为是用ps布局的，当时觉得这玩意用在css中，要是图片位置经常调整是多么恐怖的事件啊，后来发现有一工具compass可以将小图片生成一张大图，但由于没有可视化界面，在项目组中推广有点难度，有幸我们还有强大的TexturePacker这个工具，其实这工具使用相当简单，下面我就用一示例演示下生成css sprite步骤。(csdn什么时候开始不能直接粘贴图片了，，shit !).

1，首先打开工具，界面很清晰，

   2，点击add sprite图标：，添加图片路径,所有图片名都会显示在右边的Sprite列表中。

看看中间区域，是不是大图已经自动排列好了：

是的，还为了节省空间，有些图还自动旋转了，有木有，如果你不想旋转，取消息Allow rotation 这个选项就可以了，有很多参数可以调整，大家就根据自己的需要调整吧，下面我们展开Data Format下拉列表，选择css。

3，发布，点击, 在弹出对话框中，填写文件名及路径

4，保存，点击Save.

最终生成的css文件内容如下 ：

/* ----------------------------------------------------   created with http://www.texturepacker.com    ----------------------------------------------------   $TexturePacker:SmartUpdate:c58e626cab159453a4bc8a32e4c44838$   ----------------------------------------------------   usage: <span class="{-spritename-} sprite"></span>   replace {-spritename-} with the sprite you like to use*/.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(sprite_css.png);}.shockedface2_empty {width:40px; height:40px; background-position: -86px -2px}.shockedface2_full {width:40px; height:40px; background-position: -44px -48px}.shockedface2_half {width:40px; height:40px; background-position: -2px -48px}.wolfSpiderThumb {width:44px; height:44px; background-position: -2px -2px}

上面还列出了使用方法，作者做得真是细心啊，到此，我们就完成了css sprite的生成工作，怎么样，简单吧，赶紧下载一个试试吧：下载地址：

---------------------------------------------------------------------------

http://www.codeandweb.com/texturepacker - The sprite sheet creator turns chaos into order

http://www.codeandweb.com/physicseditor - Edit your physics shapes with ease

http://twitter.com/CodeAndWeb - Follow me on Twitter

---------------------------------------------------------------------------