CSS 雪碧图生成器
把多张图片或 SVG 拼成一张雪碧图，自动计算每张图的 background-position 与 background-size，输出可直接使用的 CSS 类并下载 PNG。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
文件不会上传，全部在本地浏览器处理
2x 用法：导出的 PNG 是两倍尺寸，CSS 用一半的 background-position / background-size，在高分屏上依然清晰。
还没有生成雪碧图
这个工具能做什么
- 把一堆小图标合并成一张雪碧图，自动算出每张图的 background-position，不用再手工量偏移量。
- 没有图片素材时，先按「名称 宽x高」粘贴一份占位列表，直接把布局与 CSS 定下来，素材到位后再替换。
- 做高分屏适配：勾选 2x 导出后，CSS 里的宽度与偏移自动折半并补上 background-size，PNG 仍是两倍尺寸。
- 对比不同列数与间距的排布效果，选一张尺寸最小、空白最少的拼法。
示例
输入
home 32x32 user 24x24 star 16x16 （2 列，间距 4px，基础类名 sprite）
输出
/* sprite · 3 images · 60 × 52 */
.sprite {
background-image: url("sprite.png");
background-repeat: no-repeat;
}
.sprite-home {
width: 32px;
height: 32px;
background-position: 0px 0px;
}
.sprite-user {
width: 24px;
height: 24px;
background-position: -36px 0px;
}
.sprite-star {
width: 16px;
height: 16px;
background-position: 0px -36px;
}排布是列优先：第 i 张图落在第 i % 列数 列、第 floor(i / 列数) 行；background-position 取负偏移，所以第一张图是 0px 0px。
常见问题
图片会上传到服务器吗？
不会。文件通过 File API 读进内存，拼图用本地 Canvas 绘制，导出的 PNG 也是浏览器自己生成的，页面不发任何网络请求。
2x 导出到底改了什么？
导出的 PNG 是两倍尺寸，CSS 里的 width、height、background-position 和 background-size 全部按一半输出。这样在普通屏上按 CSS 像素显示、在高分屏上由两倍像素填充，边缘不会发虚。
为什么拼接后的尺寸比图片加起来还大？
每列宽度取该列最宽的图、每行高度取该行最高的图，再加上你设置的间距（列间距和行间距都算）。这是为了给不同尺寸的图片留出对齐空间，想更紧凑就把间距设为 0。
类名是怎么生成的？
基础类名默认 sprite，每张图拼成 sprite-<名称>：名称去掉扩展名、转小写、非字母数字换成连字符。全中文或纯符号的名称兜底成 sprite-image-1、sprite-image-2 这样的序号类名。
粘贴列表的格式有要求吗？
每行一个「名称 宽x高」，乘号可以写 x、× 或 *，名称里可以有空格，留空则按序号命名。宽度或高度必须大于 0，解析不了的行会直接报错，不会静默跳过。
关键词：雪碧图css spritesprite generator精灵图background-positionretina图标合并css 精灵