图像精灵图生成器
图片
把许多小图像（图标、UI 状态、角色帧）合并成一个可下载的 PNG，并发出一个用 `background-position` 定位每个的 CSS 块。当图标字体、SVG 精灵或真正的精灵图管线不可选时，减少 HTTP 请求。布局有水平条带、垂直条带或固定列网格；图集尺寸适配每行或列的最大项。文件通过 canvas 完全在客户端处理 —— 你的图标永远不离开浏览器。
—
使用方法
- 拖入或选择图像。它们按 OS 交付的顺序出现。
- 选择布局：水平/垂直条带最简单，网格更密。设置 padding 避免溢出。
- 下载 PNG，复制 CSS，一起发布 —— 匹配你在 CSS 前缀中放的类名。
常见问题
- 精灵图 vs. SVG 精灵 vs. 图标字体？
- PNG 精灵在源是真实光栅（游戏美术、照片缩略图）时仍获胜。UI 图标学优先选 SVG 精灵（`<symbol>` + `<use>`）—— 它们缩放并响应 currentColor。图标字体现在大多是遗留回退。
- 透明度怎么处理？
- 如果保持背景透明，PNG 保存为带 alpha（你在预览中看到的棋盘只是让透明区域可见）。如果选择白色或黑色，这些会烘焙到图集中。