如果你不知道什么叫 CSS Sprites, 就自己搜索一下吧, 我就不介绍了.
http://csssprites.com/ 是我比较喜欢的网站, 通过它可以简单几步就拼合了背景图片, 下面就一起来看看吧.
访问 CSS Sprites Generator http://csssprites.com/ , 就可以看到如下界面
CSS Sprites Generator 操作方法 #####
1. 首先选择需要拼合的图片 (最好是大小, 格式都一样的, 但也不绝对), 如演示, 就选择了自己设计的几个小图标 (宽高都为 20px)
2. 点击 + options 展开设置选项
Padding between elements: 图片与图片的间距 (根据自己的需要设置)
Border around the whole image: 每个图片的边框 (通常为 0px)
Align elements: 对齐方式, left 为左对齐 (纵向排列),top 为顶部对齐 (横向排列)
Background color: 背景颜色, transparent 继承原图背景, 或者自动以 RGB 颜色
3. 设置好以后, 点击 generate! 按钮即可生成
4. 接着你可以查看和下载生成的图片, CSS Sprites Generator 还自动给出了每个图标的调用方法, 如果你了解 CSS Sprites 技术, 相信调用就不是问题了.
CSS Sprites Generator 还是有不少局限的, 仅仅提供了简单的左对齐和顶部对齐这两种方式, 如果可以在线自由拖动调整图片的位置, 这样就非常强大啦! 期待以后有这样的功能!
好了, 你自己也去亲自体验一下吧: CSS Sprites Generator
如果你好的东西, 一定和 lauhee 分享哦!!
来源: http://www.qdfuns.com/article/31519/882480ed0d14abc70dc731e3c820034b.html