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

 

1 、准备工作

利用图片处理工具做好多个小图标，建议 20px ,20px ， gif 或 png 可透明格式。

将小要合并的小图标名统一，建议：名称 + 序号 + 后缀。

2 、合并图片并生成 CSS 文件

方案一：

利用单机软件，如：CssBgImageMergeTool   可手动排列图标间距生成大图，并生成固定单一的 CSS 文件。

方案二：

利用在线 CSS 图片合成网站合成，如： http://cn.spritegen.website-performance.org/

将要合并的小图标打成一个 zip 包，上传，设置好排列方向和间距就可以自动合成并生成 css 代码。

方案三：

大量图标情况下，先利用图片工具批量合成大图片，自编代码根据合成图片名称和图片像素生成 CSS 定位文件。