雪碧图生成器

雪碧图生成器的使用场景

• 把一组图标合成一张图减少请求
• 给老项目补一份可直接用的 CSS sprite 规则
• 快速核对多张图标尺寸是否一致

雪碧图生成器怎么用

1. 选择多张图片并设定排列与间距
2. 查看拼版画布与生成的 CSS 规则
3. 下载 sprite.png 并把 CSS 贴进项目

常见问题

图片会被缩放吗？

不会。工具按所有图片中的最大宽高作为单元格尺寸原样绘制，尺寸不一致时小的图会靠左上对齐，建议先统一尺寸。

偏移值为什么是负数？

雪碧图用一张大图做 background-image，要显示第 N 个图标就得把大图往左上移，所以 background-position 用负值。

支持 Retina 图吗？

可以按 2× 尺寸的图片生成，但 CSS 里的 background-size 需要你自己按倍率补写，工具当前只输出 position。