精灵图生成器

布局如何工作

生成器使用一种可预测的单一布局：均匀网格。你设定列数，行数则为 向上取整(图片数 / 列数)。每个单元格都是相同的正方形尺寸（你选择的瓦片尺寸），因此每张图片会在保持宽高比的前提下缩放以适配其单元格，并居中。尺寸不一的图片最终都落入相同大小的单元格，这正是使用 background-position 的 CSS 精灵所期望的。

生成的 CSS 形态

每张图片会变成以其文件名命名的类（.spr-<名称>），尺寸等于瓦片，并偏移到其单元格。当列数为 4、瓦片尺寸为 128 px 且无间距时，图表如下所示：

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

偏移在两个方向上移动：精灵从左到右填满每一行，然后换到下一行。把 PNG 保存为与你的 CSS 相邻的 spritesheet.png（或修改 url(...) 以匹配你的路径）。

间距与渗色

边对边紧密排布的精灵在浏览器缩放图表时（非整数像素比、CSS 变换）可能相互渗色。在单元格之间加入 2 到 4 像素的间距，防止相邻像素渗入。

高密度（Retina）屏幕

没有自动的 2x 导出，但你可以用简单的办法得到更清晰的图表：选择更大的瓦片尺寸（例如 256 px 而非 128 px），让每个精灵携带更多像素，然后在 CSS 中以一半尺寸显示。这样无需单独的处理过程，就能在高密度屏幕上获得清晰的精灵。

精灵图与替代方案

• 精灵图： CSS 中的经典图标集、HTML5 游戏帧，以及从把许多小图片合并为一个文件中获益的页面。
• SVG 精灵（symbol）： 更适合现代界面图标，无损缩放，接受 CSS fill，无需摆弄 background-position。
• 图标字体： 有限，但仍用于极小的单色图标。
• 搭配 HTTP/2 或 HTTP/3 的独立文件： 多路复用让请求数量不再像过去那样重要。