background-position值需用负值精确定位精灵图，因背景图默认左上角铺满容器，目标图标在右下方，须向左上偏移；如第2行第3列、每图48×48px，则设为-96px -48px。
background-position 值怎么算才不偏移
精灵图错位，八成是 background-position 算错了坐标。它不是“从图片左上角到目标图标左上角的距离”，而是“背景图相对于容器左上角的偏移量”——方向相反，容易直觉搞反。
实操建议：
- 用开发者工具选中元素，拖动
background-position的 x/y 值实时预览，比手算靠谱 - 如果图标在精灵图中位于第 2 行第 3 列，每图标宽
48px、高48px，则background-position: -96px -48px（注意负号！） - 避免混用单位：不要写
-2rem -10px这样，浏览器会按各自基准算，结果难预测 - 用百分比时要小心：
background-position: 100% 100%是把背景图右下角对齐容器右下角，不是“移到最右下”
为什么必须用负值定位精灵图
因为 CSS 背景图默认以左上角为原点铺满容器，而精灵图里目标图标通常在原点“右边下方”，要把它“拉进来”，就得往左、往上挪——也就是负的 x 和 y 偏移。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
background-position: 50px 30px，结果图标完全看不见：正向偏移把图拉出容器了 - 只设了一个值如
background-position: -60px，以为是 x 值，其实这是 x y 同值简写，y 也会变成-60px - 用了
background-position: left top却没效果：这是关键字，但必须和尺寸单位配合用才可控，纯关键字无法精确定位单个图标
background-size 缩放后 background-position 怎么调
当精灵图被 background-size 缩放后，background-position 的像素值也要同比例缩放，否则定位立刻漂移。
比如原始精灵图 200×200px，包含 4 个 50×50px 图标；你用 background-size: 100px 100px 把整图压缩一半，那原来 -100px -50px 的位置，现在得改成 -50px -25px。
关键点：
- 缩放比例 =
新尺寸 / 原尺寸，所有background-position值都乘这个比例 - 如果用百分比定位，一般不受缩放影响，但前提是图内结构和容器比例一致，否则仍会偏
- 调试时先关掉
background-size，调准background-position，再开缩放微调
background-position 不生效的常见干扰项
位置“看起来不对”，未必是 background-position 写错了：
-
background-repeat默认平铺：若只想要单张图，务必加background-repeat: no-repeat - 元素尺寸为 0 或未设宽高：空
div没内容、没height，背景无处可显 —— 先检查width/height或padding -
background-attachment设为fixed：此时定位基准变成视口，滚动时图片不动，易误判位置 —— 非必要不用fixed - 父容器
overflow: hidden且子元素溢出：图片被裁切，看似“偏了”，实则是显示区域受限
真正麻烦的永远不是数值本身，而是你没意识到容器边界在哪、背景图实际铺在哪、缩放是否已悄悄改了坐标系。调定位前，先用 background-color 和 border 把容器框出来。
