CSS 图片拼合 (CSS sprites) 制作流程

thoughtfly

 
1、准备工作
利用图片处理工具做好多个小图标，建议20px ,20px ，gif或png可透明格式。
将小要合并的小图标名统一，建议：名称+序号+后缀。
2、合并图片并生成CSS文件
方案一：
利用单机软件，如：CssBgImageMergeTool  可手动排列图标间距生成大图，并生成固定单一的CSS文件。
方案二：
利用在线CSS图片合成网站合成，如：http://cn.spritegen.website-performance.org/
将要合并的小图标打成一个zip包，上传，设置好排列方向和间距就可以自动合成并生成css代码。
方案三：
大量图标情况下，先利用图片工具批量合成大图片，自编代码根据合成图片名称和图片像素生成CSS定位文件。