background-position 单独设置无效，必须与 background-size 配合控制裁剪区域；否则 cover/contain 的缩放逻辑会覆盖定位效果，导致如 top center 仍切头等现象。
background-position 单独设没用，必须和 background-size 配合才能控裁剪区域——否则你调的值全被 cover/contain 的缩放逻辑吃掉了。
background-position 为什么看起来“不生效”
常见现象是写了 background-position: top center，但人物头顶还是被切掉。根本原因不是位置写错，而是：background-size 没显式设，或设成了 cover 却没意识到它会重算坐标系。
- 默认
background-size: auto：定位基于原始图尺寸，20px 30px真正偏移图像左上角 - 设了
background-size: cover：图先等比缩放填满容器，再居中裁剪；此时background-position是在缩放后的图上操作，但浏览器仍按容器尺寸解释像素值 - 混用单位（如
background-position: 20% 10px）：百分比按容器算，像素按原图算，坐标系打架，结果不可控
移动端人像/文字类背景必须手动调 position
设计稿里人脸在图上半部分，但 background-position: center 默认裁中间——竖屏一来，脸直接消失。这不是 bug，是 cover 的必然行为。
- 人物照/头像：用
background-position: top center，保头顶不被裁 - 带地面/按钮的 Banner：用
background-position: bottom center，留脚不切鞋 - 文字在图底部？改用
background-position: center bottom或50% 100%，让图底部对齐容器底边 - 慎用像素值（如
20px 40px）：响应式下完全不可控；百分比（如30% 20%）更稳，但得真机反复调
多背景图或精灵图时 position 必须和 size 对齐
CSS 多背景语法中，background-position 和 background-size 是逗号分隔的并行列表，顺序错一个，整组就乱。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
background-image: url(a.png), url(b.png); background-position: top left, center; background-size: 50px 50px, cover; - 错误写法：
background-size: cover;只写一个值 → 第二张图用默认auto，第一张图反而没 size 控制 - 精灵图定位必须用负值：
background-position: -144px -96px（假设图标格子 48×48px，目标在第 3 列第 2 行） - 若加了
background-size: 200px 100px缩放精灵图，所有background-position像素值也得同比例缩放，否则立刻漂移
调试时最容易忽略的三个前提
别急着调 background-position 数值，先确认这三点是否成立：
-
background-repeat: no-repeat必须显式写，否则平铺掩盖所有偏移效果 - 容器要有明确宽高或
aspect-ratio，空<div>没 height 就没渲染空间 - 别用
background-attachment: fixed调试——它把定位基准从容器变成视口，滚动时图不动，容易误判“位置错了”
真正防变形的关键不在 position 写得多细，而在于容器比例是否锁死、size 是否选对、repeat 是否关掉——这三个点松动，position 再准也没用。
