CSS 雪碧图生成器

将多张图片合并为一张 CSS 雪碧图。上传图片，自动生成 background-position CSS 规则，下载雪碧图 PNG——全部在浏览器中运行，无需上传。

上传图片（PNG、JPG、GIF、SVG）

添加间距间距： px 布局：类前缀：

雪碧图预览

上传图片并点击"生成雪碧图"查看结果。

生成的 CSS

关于 CSS 雪碧图生成器

这个 CSS 雪碧图生成器完全在你的浏览器中运行。上传多张图片，选择布局和间距选项，然后点击生成雪碧图将它们合并为一张雪碧图。工具会生成 background-position CSS 规则，并允许你下载雪碧图 PNG。整个过程不上传任何数据——所有处理由 JavaScript 和 Canvas API 在本地完成。

使用方法

点击文件输入框并选择多张图片（PNG、JPG、GIF 或 SVG）。
选择布局（水平或垂直），可选添加图片间距。
如需要可设置 CSS 类前缀（默认为 sprite）。
点击生成雪碧图合并图片并生成 CSS 规则。
点击下载 PNG保存雪碧图，或复制 CSS复制规则。

什么是 CSS 雪碧图？

CSS 雪碧图是一张包含多个小图片的单一图片文件。通过使用 CSS background-position 只显示雪碧图的一部分，可以减少页面的 HTTP 请求数量，提升加载性能。这种技术广泛用于图标、按钮和其他 UI 元素。

常见问题

支持哪些图片格式？ PNG、JPEG、GIF 和 SVG。雪碧图以 PNG 格式输出以保留透明度。

CSS 类名如何生成？ 每个类名基于图片文件名（不含扩展名），加上你选择的前缀。例如，icon-home.png 加前缀 sprite 变成 .sprite-icon-home。