🧩 CSS 雪碧图生成器CSS Sprite Generator

使用说明与常见问题How-to & FAQ

「CSS 雪碧图生成器」是什么？What is the CSS Sprite Generator tool?

把多个小图标合并成一张雪碧图（CSS Sprite），自动生成每个图标的 background-position 样式类，可选择横排、竖排或网格排列和间距，支持 2 倍图（Retina），下载 PNG 和 CSS。Merge many small icons into one CSS sprite sheet and get a class with background-position for each icon. Choose horizontal, vertical or grid layout and padding, with optional 2× (Retina) output, then download the PNG and CSS.

如何使用「CSS 雪碧图生成器」？How do I use the CSS Sprite Generator?

选择或拖入多张图标图片，设置排列方式、间距和类名前缀，下方会生成合并后的雪碧图和 CSS。类名取自文件名（如 home.png → .icon-home）。勾选 Retina 时请上传 2 倍尺寸的原图，CSS 会按一半尺寸显示。Pick or drop several icon images, set the layout, padding and class prefix, and the merged sprite and CSS appear below. Class names come from file names (home.png → .icon-home). For Retina, upload 2× images; the CSS displays them at half size.

现在还需要雪碧图吗？Are sprites still useful?

在 HTTP/2 下多个小文件的请求开销已经很小，但雪碧图仍适合大量小图标、游戏素材和不支持 SVG 的场景；图标较多时也可以考虑 SVG 图标或字体图标。With HTTP/2 extra requests are cheap, but sprites still suit large sets of small icons, game assets and places without SVG support; for many icons also consider SVG or icon fonts.

Retina 2× 是怎么处理的？How does Retina 2× work?

上传两倍尺寸的图标后，雪碧图保持原始像素，CSS 用 background-size 把整张图缩小一半显示，宽高和偏移也都除以 2，这样在高清屏上更清晰。Upload 2× icons; the sprite keeps full pixels while the CSS halves it with background-size and halves every width, height and offset, so icons look sharp on high-DPI screens.

「CSS 雪碧图生成器」免费吗？数据会上传吗？Is the CSS Sprite Generator free? Is my data uploaded?

「CSS 雪碧图生成器」完全免费，无需注册或安装，手机和电脑都能用；所有处理都在你的浏览器本地完成，输入的内容和文件不会上传到服务器。The CSS Sprite Generator is completely free with no sign-up or install and works on phones and desktops; everything runs locally in your browser and nothing you enter is uploaded.