CSS 精灵图坐标生成器
计算雪碧图 background-position。
🧩CSS 精灵图坐标生成器
全部处理在本地完成功能说明
「CSS 精灵图坐标生成器」是一个CSS 精灵图坐标生成器，实时预览并生成可复制的 CSS 代码，所有生成都在浏览器内完成，可直接复制 CSS 代码粘贴到项目里使用。
修改任一参数后代码立即刷新，右侧预览同步更新。
使用方法
- 在页面上方的输入框中填入需要处理的内容，或点击示例按钮载入一段演示数据。
- 按需调整下方的选项，例如输出格式、分隔符、大小写或精度等参数。
- 点击主按钮开始处理，结果会实时显示在输出区域，无需等待页面跳转。
- 确认结果无误后，点击右上角的复制按钮，或使用下载按钮保存为本地文件。
使用技巧与注意事项
建议在粘贴前先清理多余的空格与换行，能得到更准确的结果。
常见问题
把多张小图合成一张，只需一次 HTTP 请求，对大量小图标的页面能显著减少请求数。HTTP/2 下收益变小，但对图标仍有用。
background-position 定位的是图片相对元素左上角的偏移，要显示第 3 列就必须把图片左移，所以是负值。
会。需要准备 2 倍尺寸的精灵图，再用 background-size 缩小一半，才能保证清晰。
不需要。本工具完全免费，打开页面即可直接使用，没有次数限制，也不需要注册账号或登录。
不会。所有计算都在你的浏览器本地完成，输入内容不会发送到服务器，也不会被记录或保存。
可以。页面采用移动优先的响应式设计，在手机和平板上按钮尺寸与输入框都经过适配，横竖屏都能正常操作。
可以。输出区域右上角有复制按钮，一键复制到剪贴板，也可以下载为文本文件后再使用。