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

> 免费在线 CSS Sprite 雪碧图生成器：多张图标合成精灵图，可选紧凑装箱 / 网格 / 横竖排，自动生成 CSS 类与 JSON 坐标，也能把精灵图切回单帧。

- 网址: https://qilingtools.com/zh/image/sprite
- 分类: 图片工具 (https://qilingtools.com/zh/image)
- 标签: [图片](https://qilingtools.com/zh/tags/image), [设计配色](https://qilingtools.com/zh/tags/design), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

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

## 使用步骤

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

## 功能特点

- 紧凑装箱 / 网格 / 横排 / 竖排四种排列
- 自动生成 CSS 类与 background-position、JSON 坐标
- @2x 高清精灵图与 background-size 适配
- 附带预览 HTML，类名按文件名自动生成
- 精灵图按行列或单元格切分，跳过空白格

## 常见问题

### 生成的 CSS 怎么用？

把 sprite.png 和 sprite.css 放到同一目录并引入 CSS，然后在元素上同时加基础类和图标类，例如 <i class="icon icon-home"></i>。类名来自文件名，前缀可以在选项里修改。

### @2x 选项是什么意思？

如果你的图标是按两倍尺寸做的高清图，勾选后会生成原尺寸的 sprite.png 和高清的 sprite@2x.png，CSS 在 Retina 等高分屏上自动换用高清图，显示尺寸保持不变。

### 文件会上传到服务器吗？

不会。本站所有处理都在你的浏览器中本地完成，文件不会离开你的电脑，关闭页面后即被清除。

### 需要注册或付费吗？

不需要。本站完全免费，无需注册登录，没有次数限制，也不会在文件上加水印。

## 相关工具

- [PDF 转图片](https://qilingtools.com/zh/pdf/to-image): 免费在线 PDF 转图片工具：将 PDF 每一页渲染为高清 JPG 或 PNG 图片，可选 72/150/300 DPI，批量打包下载，本地处理不上传。
- [图片转 PDF](https://qilingtools.com/zh/pdf/from-image): 免费在线图片转 PDF 工具：把多张 JPG、PNG、WebP 图片按顺序合成一个 PDF，支持 A4 或按图片尺寸排版，本地处理不上传。
- [图片压缩](https://qilingtools.com/zh/image/compress): 免费在线图片压缩工具：批量压缩 JPG、PNG、WebP 图片体积，可调质量与最大尺寸，显示压缩前后对比，本地处理不上传。
- [图片改尺寸](https://qilingtools.com/zh/image/resize): 免费在线图片缩放工具：按像素宽高或百分比批量修改图片尺寸，可锁定比例，支持 JPG/PNG/WebP，本地处理不上传。
- [图片格式转换](https://qilingtools.com/zh/image/convert): 免费在线图片格式转换工具：把 JPG、PNG、WebP、GIF、BMP 等图片批量转换为 JPG、PNG 或 WebP，本地处理不上传。
- [图片加水印](https://qilingtools.com/zh/image/watermark): 免费在线图片水印工具：批量给图片添加文字水印，支持位置、平铺、透明度、字号、颜色设置，本地处理不上传。
- [长图拼接](https://qilingtools.com/zh/image/stitch): 免费在线图片拼接工具：把多张截图或照片按纵向/横向拼接成一张长图，可设置间距与背景色，本地处理不上传。
- [抠图去背景](https://qilingtools.com/zh/image/remove-bg): 免费在线抠图工具：AI 自动识别人像、商品、动物等主体，一键去除背景生成透明 PNG，也可换成白/红/蓝等纯色底（证件照换底色）。浏览器本地处理，图片不上传。