精灵图生成

📖 工具说明

1. 精灵图有什么用

把很多小图标合并成一张 PNG，用 background-position 定位显示：

• 少请求：一张图代替几十张，减少 HTTP 往返。
• 不闪烁：hover 换图时不会因为要加载新图而出现白块。
• 好管理：图标集中一处，方便更新和缓存。

（SVG 图标 / 图标字体现在也很常用，位图图标或需要兼容旧环境时精灵图仍然合适。）

2. 怎么用

1. 点上传区或把图片拖进去（可多选）。
2. 选排列方式（横向 / 纵向 / 网格）和间距。
3. 每个图标可改类名；重名会标红提示。
4. 右侧实时预览合成图和 CSS，改参数即时更新。
5. 下载 PNG、下载或复制 CSS。

@2x 选项：只有当你上传的素材本身就是 2 倍尺寸时才勾选——工具会把 CSS 的宽高和坐标按一半输出，并给基类加 background-size。勾选它不会把 1 倍图变清晰。

图片只在浏览器本地合成，不上传。

3. 生成的 CSS 长这样

.icon- { display:inline-block; background-image:url('sprite.png'); background-repeat:no-repeat; }
.icon-home { width:24px; height:24px; background-position:-4px -4px; }
.icon-user { width:24px; height:24px; background-position:-32px -4px; }

用法：<i class="icon- icon-home"></i>。

4. 常见问题（FAQ）

Q：间距设多少合适？ A：一般 2–4px。间距太小时，浏览器缩放或高分屏上相邻图标边缘可能渗进来一点。

Q：图标大小不一样能合吗？ A：能。横向 / 纵向按各自尺寸排，网格按最大图标的尺寸留格子。为方便定位，建议同一套图标尺寸尽量统一。

Q：为什么勾了 @2x 还是糊？ A：@2x 需要你上传的图片本身是 2 倍分辨率的素材。把普通图勾 @2x 只是把 CSS 尺寸减半，不会增加细节。

Q：下载的 PNG 体积能再小吗？ A：可以再用 TinyPNG、pngquant 等工具压一道。本工具输出的是标准 PNG，未做有损压缩。

Q：图片会上传吗？ A：不会。上传、合成、生成 CSS 都在你的浏览器里完成。

相关：颜色选择 · CSS 效果生成器 · Base64 和文件互转 · Base64 编解码 · 正则表达式。

📖 了解原理

📖 相关推荐