background-position错位主因是原点理解错误：它表示背景图向左/上偏移量，而非图标距容器边缘距离；如第2行第3列、每图48×48px，应设为-96px -48px（列索引0起：3×48=144→-144px？但原文示例为-96px，按行列从1起计则(3−1)×48=96，(2−1)×48=48），需严格对齐像素网格、统一图标尺寸并关闭抗锯齿。
background-position 坐标错位，八成不是图没切好，而是原点理解反了——它不是“图标距左距上”，而是“背景图往左往上拉多少”。
为什么 background-position 总是偏移错位？
常见错误现象是图标显示空白、只露半边、或直接显示隔壁图标。根本原因在于误把设计稿里“图标左边缘距画布左边 96px、上边缘距顶部 48px”直接当成 background-position: -96px -48px；实际上这个值表示：把整张雪碧图向左拖 96px、向上拖 48px，让图中坐标 (96, 48) 的那个像素点对准容器左上角。
- 图标在第 2 行第 3 列、每图 48×48px、无间距时，正确值是
background-position: -96px -48px（列索引从 0 开始：(3−1)×48 = 96；行索引：(2−1)×48 = 48） - 用 Figma/Sketch 导出前必须开启“像素网格对齐”，否则坐标带小数（如
-96.3px），浏览器渲染模糊 - 开发者工具里悬停元素，看 computed 样式中的
background-position实际值，反推当前偏移是否合理
Webpack/Vite 项目里怎么自动生成雪碧图而不手动画图？
手动拼图+手算坐标维护成本高，尤其图标频繁增减时。构建工具插件能自动读取 SVG/PNG 目录、合并、输出图 + CSS 类，但配置不对反而更糟。
- Webpack 推荐
svg-sprite-loader（仅 SVG）或css-sprite-webpack-plugin（支持 PNG）；关键要对齐三处：import路径、symbolId生成规则、spriteFilename输出路径 - Vite 用
vite-plugin-svg-sprite时，默认走 inline<use>模式，不生成传统雪碧图 CSS；若坚持用background-position，需显式启用useSpriteSheet: true - build 后
sprite.png没出现在dist/？检查是否漏配public/托管，或output.publicPath路径没对上
如何让 hover/active 状态共用一张雪碧图？
不用为每个状态单独加载新图，靠 background-position 切换区域即可，但排版和类名组织得有规律，否则后期改起来像解谜。
立即学习“前端免费学习笔记（深入）”；
- 推荐垂直堆叠：正常态在第 1 行、hover 在第 2 行、active 在第 3 行，每行高度 = 单图标高度；这样
.icon-btn:hover只需写background-position: 0 -24px（假设图标高 24px） - CSS 优先用类组合：
.icon-home定义基础尺寸与图，.icon-home:hover仅覆盖background-position，避免重复声明 - 慎用
transition: background-position——多数浏览器不优化该属性，易卡顿；如需平滑过渡，改用伪元素 +transform: translate()
真正容易被忽略的，是图标尺寸必须严格统一、导出时关闭抗锯齿、以及高清屏下用 background-size 配合 2x 图缩放——这些细节不处理，就算坐标全对，用户看到的也可能是虚边或错位。
