CSS 精灵图生成器

上传多张图片自动拼接为 Sprite 合成图，并生成对应 CSS 背景定位代码

精灵图拼接

选择或拖拽图片到下方区域，自动拼接并生成 CSS 代码

点击选择图片或拖拽到此处

支持 PNG / JPG / GIF / WebP / SVG，可多选

上传图片后点击"生成精灵图"即可在此预览
广告位

使用说明

  1. 点击上传区选择图片，或将图片直接拖拽到虚线框内（支持多选）
  2. 选择布局方式：横向排列、纵向排列、或网格布局（可指定列数）
  3. 拖动"间距"滑块设置图片之间的留白像素（0-20px）
  4. 选择 CSS 类名生成方式：使用文件名（如 .home.png → .home）或自动编号（icon-1、icon-2）
  5. 点击"生成精灵图"按钮，下方预览区显示合成结果与每张子图的边框标记
  6. 切换到"CSS 代码"Tab 查看背景定位代码，可一键复制或下载 PNG 合成图
  7. 所有图片处理在浏览器本地完成，不上传到服务器

适用场景

  • 网站性能优化：合并小图标减少 HTTP 请求数量
  • 图标系统：批量生成网站图标精灵图与对应 CSS 类
  • 动画帧序列：将帧图拼接为单图便于动画播放
  • 邮件模板：合并图片减少邮件内外链依赖
  • 移动端 H5：减少首屏图片加载耗时

安全保障

  • 本地拼接：图片读取与 Canvas 合成均在浏览器本地完成
  • 隐私保护：图片不会上传到任何服务器
  • 无网络请求：整个过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

支持哪些图片格式？

支持 PNG / JPG / JPEG / GIF / WebP / SVG 等浏览器原生支持的格式。建议优先使用 PNG（保留透明通道）或 WebP（更小体积）。SVG 会按其自然尺寸绘制到 Canvas。

三种布局方式如何选择？

横向排列适合横向并排的图标条；纵向排列适合纵向菜单图标；网格布局适合数量较多的图标集（如整站图标库）。网格布局可在 1-20 之间设置列数，工具会自动计算行数。

CSS 中的 background-position 是负数是什么意思？

精灵图技术通过将背景图向左/上偏移来显示对应子图。background-position 的两个值均为负数（如 -32px -64px），表示将合成图向左移动 32px、向上移动 64px，让目标子图显示在元素视口内。

图片加载失败或预览空白怎么办？

请确认图片文件未损坏。部分超大图片可能因 Canvas 尺寸限制失败，建议单张图片不超过 4096×4096。SVG 若包含外部资源引用可能无法正确绘制，建议内联所有内容。