CSS 雪碧图生成器
CSS 雪碧图生成器针对把多图标合成一张图的用法：录入每个图标在合并图中的宽高与偏移，算出对应 background-position 与尺寸，输出逐类的定位样式，用一张图承载多个小图标以减少请求数。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 设定合并图整体尺寸
- 录入每张子图宽高与坐标
- 生成对应的定位样式
- 复制到各图标的类里
典型场景
站点小图标合并成一张降请求
导航箭头按坐标切出各子图
旧项目维护 sprite 定位表
常见问题
还支持现代做法吗？
如今多用 SVG 或图标字体，雪碧图适合囿于旧兼容的场景。
坐标以何为原点？
以左上为原点，负值定位常用 y 方向偏移。
和直接用图区别？
多图标共用一张图只发一次请求，靠 background-position 切片。