CSS Sprite 生成器
免费在线使用 CSS Sprite 生成器 无需安装即可使用工具
关于 CSS Sprite Generator
将多张上传的图片（PNG、JPEG 或 SVG）合成为单张 PNG 雪碧图（sprite sheet），在 canvas 上渲染，并生成对应的 CSS background-position 规则。提供三种布局：horizontal（水平）、vertical（垂直）和 packed（按行折排）。可选的像素间距（Padding）可插入到各图片之间。
如何使用
1. 点击上传区域或将图片文件拖拽到其中。支持 PNG、JPEG 和 SVG；非图片文件会被自动过滤。 2. 选择 Layout（Horizontal、Vertical、Packed）以及可选的 Padding（以像素为单位，0-100）。 3. 点击 Generate。在棋盘格背景上会出现雪碧图预览。 4. 点击 Download 保存 sprite.png，并使用 Copy CSS 复制生成的 CSS 规则。
布局与 CSS 输出
Horizontal 将图片从左到右排成单行，高度等于最高的图片高度。Vertical 将图片从上到下堆叠成一列，宽度等于最宽的图片宽度。Packed 根据一个宽度折行换行，该宽度由 ceil(sqrt(count)) 乘以最宽图片宽度得出。生成的 CSS 会为每张图片输出一个 '.icon-<name>' 类，包含 width、height、一条 'background: url(sprite.png) no-repeat' 声明，以及一个负值的 background-position。文件名会去掉扩展名，并被规范化为 [a-zA-Z0-9_-]。
▶支持哪些图片格式？
通过文件 accept 过滤器支持 PNG、JPEG 和 SVG。任何 MIME 类型以 'image/' 开头的文件都会被加载；其他文件会被静默丢弃。输出的雪碧图始终是 PNG（通过 canvas.toDataURL）。
▶为什么 SVG 渲染出来的尺寸不对？
该工具在加载 SVG 后读取 img.naturalWidth/naturalHeight。没有固有尺寸的 SVG 可能会报告 0x0 或一个默认尺寸，这随后就成为它在雪碧图中的槽位尺寸。
▶生成的 CSS 引用的图片 URL 正确吗？
CSS 使用的是 'url(sprite.png)'。如果您将下载下来的文件另存为不同的名称或路径，必须编辑 CSS 输出中的 url() 以使其匹配。
▶packed 布局是真正的装箱算法吗？
不是。它只是一个简单的换行排布，换行宽度由图片数量和最宽图片宽度推导得出。它不会最小化总面积，也不会按高度排序，因此生成的雪碧图可能会留有空白。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。