祈灵工具箱

🧱CSS 精灵图生成器 - 多张图标合成 Sprite 雪碧图并生成 CSS，精灵图切分

网页上有很多小图标时，把它们合成一张精灵图（雪碧图）能减少请求数。选择多张图片（透明 PNG 最佳），工具会用自动扩展的装箱算法把它们紧凑排列成一张图，也可以选网格、横向一行或纵向一列；可设置图片间距防止边缘串色。勾选 @2x 后，按高清图合成并同时输出 sprite.png 和 [email protected]，CSS 通过 background-size 与媒体查询自动适配高分屏。生成的 sprite.css 为每张图片按文件名生成一个类（含宽高和 background-position），另附 sprite.json 坐标表和一个 preview.html 预览页，打包下载。反过来，“切分精灵图”可以把游戏角色、动画帧等 Sprite Sheet 按行列数或单元格尺寸（支持起始偏移和间距）切成单独的 PNG，并自动跳过空白格。

免费 · 无需注册 · 浏览器本地处理最后更新：

正在加载工具...

如何使用CSS 精灵图生成

  1. 1选择“合成精灵图”并上传多张图标，或选择“切分精灵图”上传一张精灵图
  2. 2合成时选择排列方式、间距、类名前缀和 @2x 选项；切分时设置行列数或单元格尺寸并查看红框预览
  3. 3生成后下载 PNG + CSS + JSON 压缩包，或切分出的帧图片

常见问题

生成的 CSS 怎么用？
把 sprite.png 和 sprite.css 放到同一目录并引入 CSS，然后在元素上同时加基础类和图标类，例如 <i class="icon icon-home"></i>。类名来自文件名，前缀可以在选项里修改。
@2x 选项是什么意思？
如果你的图标是按两倍尺寸做的高清图，勾选后会生成原尺寸的 sprite.png 和高清的 [email protected]，CSS 在 Retina 等高分屏上自动换用高清图，显示尺寸保持不变。
文件会上传到服务器吗？
不会。本站所有处理都在你的浏览器中本地完成，文件不会离开你的电脑，关闭页面后即被清除。
需要注册或付费吗？
不需要。本站完全免费，无需注册登录，没有次数限制，也不会在文件上加水印。