CSS 精灵图生成器

功能

• 多张图片一次拖入，拼成一张 PNG 精灵图
• 自动生成每个图标的 CSS：background-position + width / height
• 三种排版：自动紧凑、一行横排、一列竖排
• 可调图标间距，避免缩放时相邻图标互相渗色
• 2 倍图模式：位置与尺寸自动减半并写 background-size
• 类名从文件名生成（中文、空格、引号都会被清洗成合法类名）
• 重名自动加序号，不会两个图标共用一条规则
• CSS 以文本产物单独给出，可复制也可下载成 .css
• 图片不上传，断网也能用

使用方法

1. 把多个小图标一起拖进虚线框（或点选多张）
2. 选排版与间距；如果图标是 2 倍图就勾上对应选项
3. 下载拼好的 PNG，复制生成的 CSS
4. 把 PNG 放到项目里，让 `url()` 指向它的实际路径

常见问题

现在还需要精灵图吗？

看场景。HTTP/2 与 HTTP/3 让多请求的代价小了很多，而 SVG 图标能直接用 `<symbol>` 内联成一份。但在图标多、每个都很小、且都是位图的情况下（游戏 UI、老后台、工具栏），精灵图仍然是最省事的：一次请求代替几十次，而且不需要改构建流程。反过来说，如果只有十来个图标，直接用 SVG 更清楚，也更方便换色。

间距（gap）为什么要留 1–2px？

因为用 `background-size` 缩放整张精灵图时（做高清屏适配的常见做法），浏览器对图片做双线性插值 —— 采样某个图标边缘的像素时会把相邻图标的边缘也采进来，表现为图标边上出现一条别的颜色。留 1–2px 完全透明的间距就断了这条路。不缩放时可以留 0。

2 倍图模式做了什么？

按「输入是 2 倍图」处理：CSS 里每个图标的 `width` / `height` 与 `background-position` 都减半，并在基础类上写 `background-size: 一半的尺寸`。这样在普通屏上图标显示为逻辑尺寸，在高清屏上浏览器用两倍像素渲染 —— 图标是锐利的。勾错了的表现是图标整体大一倍（少减半）或者只显示左上角一小块（漏了 background-size）。

类名是怎么定的？

取文件名去掉扩展名，清洗成只含小写字母、数字与连字符，再加上你设的前缀。清洗是必须的：类名会进 CSS 与 HTML，而中文文件名、空格、引号都会让选择器失效或跳出属性。名字里没有可用字符时（比如文件名是「图标.png」）按序号兜底成 `icon-1`；两张图撞名时后面的加序号（`-2`、`-3`），避免两条规则互相覆盖。