免费的在线 CSS 精灵图生成器 — 合并图片并自动生成 CSS
使用我们的免费在线精灵图生成器，从多张图片创建优化的 CSS 精灵图表。上传您的图标或图像，选择布局方向（水平、垂直或网格），设置间距，即时获得合并的精灵图表以及带有正确 background-position 的精确 CSS 代码。CSS 精灵通过将多个小图像捆绑为一个，减少 HTTP 请求，提升网站加载速度。非常适合图标集、UI 元素和按钮状态。所有处理在您的本地浏览器中进行。
上传多张图片（图标、按钮或 UI 元素）以合并为一张精灵图表。
选择布局方向（水平、垂直或网格）并调整图片之间的间距。
预览精灵图表，复制生成的 CSS 代码，并下载精灵图图像。
创建 CSS 精灵图的小贴士
- 使用尺寸相似的图片以获得最佳效果。较大的尺寸差异可能使定位难以预测。
- 网格布局适用于尺寸统一的图标集。水平布局适用于按钮状态和导航项。
- 在图片之间保留至少 2-4px 的间距，以避免在生产环境中使用精灵图时出现视觉重叠。
常见问题 — CSS 精灵图生成器
什么是 CSS 精灵图？
CSS 精灵图是一个单一图像文件，将多个小图像（图标、按钮等）合并为一个。通过使用 CSS background-position，您只显示精灵图表中需要的部分。这减少了 HTTP 请求并提高了页面加载速度。
CSS 精灵图生成器免费吗？
是的，完全免费。无需注册，无隐藏费用，无水印。所有处理在您的本地浏览器中进行。
支持哪些图片格式？
该工具支持所有常见图片格式，包括 JPG、PNG、WebP、GIF、BMP、AVIF、SVG 等。建议使用 PNG 以保留透明度。
如何使用生成的 CSS 代码？
复制 CSS 代码并粘贴到您的样式表中。将下载的精灵图图像放在项目的 assets 文件夹中，并将 background-image URL 路径更新为匹配您的项目结构。
应该选择什么布局？
水平布局将图片排成一行 — 适用于按钮状态和导航项。垂直布局堆叠放置 — 适用于下拉菜单和列表。网格布局以紧凑网格排列 — 最适合尺寸统一的图标集。
该工具支持高 DPI（Retina）图像吗？
该工具保留您的原始图像尺寸。如需 Retina 支持，请以 2× 尺寸上传图像，并在样式表中使用 CSS background-size 将其缩小。
我可以重新排序精灵图中的图像吗？
图像按您上传的顺序排列。如需更改顺序，只需按所需顺序移除并重新上传即可。