此工具可为您自动生成 CSS 图片拼合(CSS sprites). 仅需提交一个包含 2 个或以上图片文件的 ZIP 压缩文件 (GIF, PNG 或 JPG) 就会为您自动生成拼合后图片及正确的 CSS 代码.
选项
此工具可配置多个选项以满足您站点的需求. 说明如下:
调整原图片大小
- 宽度 & 高度
- 如果宽度或高度设置为小于 100% , 图片将在合并前自动调整. 此工具不会放大图片以保证图片质量. 默认值为 100% (不调整).
重复图片
- 忽略重复图片
- 重复图片作为不同图片在拼合图片中输出, 并创建不同 CSS 规则.
- 合并重复图片，并合并重复图片 CSS 规则
- 根据各图片文件 MD5 值判断是否重复. 重复图片将合并成一个图片并输出同一条 CSS 规则.
拼合图片输出选项
- 水平偏移
- 此设定决定各图片间水平间距大小. 请设置足够大的值以预防 Safari 背景图重复bug. 推荐使用默认值.
- 垂直偏移
- 此设定决定各图片间垂直间距大小. 请设置足够大的值以在用户调整字号的情况下正确显示背景图. 通常情况下, 我们推荐背景图在用户放大 2 级字号后仍可正确显示.
- 背景色
- 设置输出图片背景色. 可设置 3 或 6 位 hex 值. 如果留空, 并且输出格式为 GIF 或 PNG, 则将输出透明背景色.
- 拼合图片输出格式
- 支持 GIF, PNG 和 JPG 格式. GIF 和 PNG 可设置背景色透明. 默认为 PNG.
- 颜色数量
- 限制图片颜色数量可减小文件大小，对 PNG 和 GIF 格式有效.
- 图片质量
- 设定输出文件图片质量，对 JPEG 格式有效.
- 使用 OptiPNG 压缩图片
- 选中时使用 OptiPNG 压缩文件体积. 通常可减少一半文件大小。对 PNG 格式有效.
CSS 输出选项
- CSS 前缀
- 所输入字符将添加到每条 CSS 规则前. 支持 ID 选择符 和 class 选择符. 允许的字符 : a-z, 0-9, _, -, # 和 .
- 匹配文件名
- 匹配正则表达式. 从文件名中选取正则表达式小括号 () 匹配的字段. 提取的字段用做各图片默认 CSS 规则名.
- Class 前缀
- 所输入字符将添加到每条 Class 规则前. 可用于防止产生以数字开头的选择器 (W3C 推荐标准下). 允许的字符 : a-z, 0-9, _ 和 -. 不能以数字开头.
- CSS 后缀
- 所输入字符将添加到每条 CSS 规则后. 允许的字符与 "Class 前缀" 相同.