CSS 雪碧图生成器

什么是 CSS 雪碧图？

CSS 雪碧图（Sprite）是一张包含多张小图（图标、按钮、徽章）的合成图片，配合 CSS 规则一次只显示母图中的一个切片。浏览器无需加载 20 个独立的图标文件，只需下载一张 PNG 雪碧图，再用 background-position 让每个元素只露出对应的区域。该技术在 2000 年代中期开始流行，至今仍是减少 HTTP 请求数、加速图标密集界面的可靠手段。

雪碧图中的每个单元在 CSS 里由四个数字定义：宽度、高度，以及一个负向的 background-position，用来把母图偏移到使目标图标落入元素框内的位置。纵向雪碧图的 X 偏移为 0，Y 偏移随图标递增而变得更负；横向雪碧图的 X 偏移递增，Y 偏移保持 0。本工具会同时生成合成后的 PNG 和匹配的 CSS，可直接粘贴到样式表中。

本工具能做什么？

CSS 雪碧图生成器将任意数量的输入图片在画布上排列成一张雪碧图。你可以通过三个参数完全定义布局：

• 方向。纵向将图片从上到下堆叠（适合宽度相近的图标集）；横向将图片从左到右排列（适合高度相近）。生成器会自动计算画布尺寸。
• 间距。雪碧图单元之间的像素间隔。设为 0 可得到紧密排列的整图；适当间距便于在预览中辨认单元，并避免 CSS 取整不精确时的边缘渗色。
• 背景。透明保留原始 alpha 通道（最适合叠加在多变背景上的 PNG 图标）；白色用 #ffffff 填充画布（适合作为 JPG 投递或显示在白色表面上）。

最终画布会导出为名为 sprite.png 的 PNG，并在可复制的文本框中生成可直接使用的 CSS 代码块。每条规则命名为 .sprite-N，其中 N 是按添加顺序的 1 起始序号。

何时使用 CSS 雪碧图

当一个页面或应用同时展示大量小图、且你希望减少请求数和加载闪烁时，雪碧图就非常有用。常见场景包括：

• 图标集。把 UI 图标（首页、搜索、菜单、关闭等）合成到一张图，工具栏一次请求即可加载完成。
• 按钮状态。将默认、悬停、激活状态并排放置，交互时切换 background-position。
• 评分星星。纵向堆叠满星、半星、空星，通过偏移位置渲染任意分数。
• 旗帜或徽章。横向排列国旗或成就徽章，每个元素只显示其中一个。
• 邮件模板。在多图加载缓慢或不稳定的环境中，雪碧图能减少外部请求。
• 旧版浏览器。当无法使用图标字体或内联 SVG 时，PNG 雪碧图可在包括旧版 IE 在内的所有环境中工作。

对于支持内联 SVG 或图标字体的现代项目，这些技术在清晰度和颜色控制上往往更优。但当你有大量位图 PNG 图标或需要单文件资源打包时，CSS 雪碧图依然大有用武之地。

如何生成雪碧图

用本工具生成雪碧图只需几秒，全程在浏览器中完成。请按以下四步操作：

1. 添加图片。点击上传区域或拖入多个 PNG、JPG、WebP、GIF、BMP 文件。每张图片都会在本地解码并按顺序加入源列表，首批之后仍可继续追加。
2. 设置布局。选择纵向或横向，调整间距滑块（0–40 px），并选择透明或白色背景。
3. 生成。点击"生成雪碧图"——工具会把每张图片打包到一张画布上，计算每个单元的位置，渲染预览，并把匹配的 CSS 写入文本框。
4. 下载并复制。点击"下载 sprite.png"保存母图，再点击"复制 CSS"将规则复制到剪贴板，粘贴到样式表中即可使用。

由于所有步骤都通过 JavaScript 和 Canvas API 在浏览器本地运行，你的图片绝不会被上传到服务器。雪碧图生成完全私密，适合处理机密资产。

雪碧图布局技巧

一些实用技巧能帮你构建更整洁的雪碧图。添加前先按相近尺寸对图标排序，可使合成图更紧凑；尺寸混合也能用，但会留下透明空隙。对于图标集，宽度大致相同时纵向方向效果更好，高度大致相同时横向更合适。1–2 px 的间距可避免浏览器在缩放时对 background-position 取整造成的亚像素渗色。保持母图为无损 PNG（本工具始终导出 PNG）能让图标边缘保持锐利；对于要叠加在多变表面上的图标，建议使用透明背景。最后，添加前请按可排序的方式命名源文件（01-home、02-search……），因为 CSS 类序号会跟随输入顺序。