🗂️ 精灵表生成器
将多个图像打包成一个优化的PNG精灵表，并获取即用的CSS background-position规则 — 免费，在浏览器中完成，无需上传。
🗂️
将图片拖放至此，或点击选择多个
打包成一个 PNG + CSS — 在您的浏览器中，无需上传
隐私优先设计. 此工具完全在您的浏览器中运行 — 您输入的任何内容都不会上传或存储，并且可以离线使用。
关于
此工具使用浏览器Canvas API在您的设备上将图像打包成紧凑的PNG精灵表 — 没有任何内容上传到服务器。您可以拖放任意数量的图像，设置最大行宽和每个精灵的内边距，打包器会按行排列它们以最小化浪费的空间。生成后，您可以下载合并后的PNG并复制CSS代码片段，其中每个精灵都有一个类，包含正确的background-image、background-position、width和height值，可以直接粘贴到您的样式表中。因为所有操作都在浏览器本地进行，整个过程即时且完全私密。
如何使用
- 将您的图像拖放到上传区域，或点击浏览并一次性选择多个文件。
- 设置最大行宽（以像素为单位）和每个精灵周围的内边距，以控制它们的紧密程度。
- 点击生成精灵表，将所有图像打包成一个组合的PNG，并在画布上即时预览。
- 复制生成的CSS — 每个精灵都有自己的类，包含正确的background-position、width和height值。
- 下载PNG精灵表并将CSS粘贴到您的项目样式表中 — 完成。
常见问题
- 我的图像会被上传到服务器吗？
- 不会。所有操作都在您的浏览器中通过Canvas API完成。您的文件永远不会离开您的设备。
- 我可以向一个精灵表添加多少张图像？
- 没有硬性限制 — 工具可以打包您的浏览器内存允许的任意数量的图像。为了获得最佳性能，请保持单个精灵的尺寸合理。
- 最大行宽设置有什么作用？
- 它限制了每行精灵图可以扩展的宽度，当达到该限制时，打包器会开始新的一行。较大的值会产生更宽的图集；较小的值会产生更高、更窄的图集。
- 我可以直接在我的项目中使用生成的CSS吗？
- 可以。每个精灵图类都包含背景图像URL（指向你下载的PNG文件）、背景位置、宽度和高度——将其粘贴到任何样式表中，并将该类应用到你的HTML元素上。
- 我可以使用哪些图像格式作为输入精灵图？
- 任何你的浏览器可以解码的格式——PNG、JPEG、WebP、GIF、SVG、AVIF等。输出的精灵图集始终是单个PNG文件，以获得最佳兼容性。
- 此工具会上传我的数据吗？
- 不会。所有操作都在您的浏览器中完成，因此您的数据永远不会离开您的设备 — 甚至在页面加载后也可以离线使用。