最稳妥写法是 background-position: 50% 50% 或 center center；百分比基于容器与图片尺寸差值计算，关键字可混用；需配合 background-repeat: no-repeat 避免平铺掩盖位移，慎与 cover/contain 同用，多背景图须逗号严格对应。
background-position 值怎么写才生效
直接写 background-position: 50% 50% 或 background-position: center center 最稳妥。百分比值是相对于容器和图片本身的：第一个值控制水平，第二个控制垂直；0% 0% 是左上角，100% 100% 是右下角。别写成 50 50（缺单位）或 "50% 50%"（加引号），CSS 不认字符串。
常见错误现象：background-position: 20px 30px 看不出变化？大概率是没设 background-repeat: no-repeat，图片平铺了，位移被掩盖。
- 用像素值时，位移从容器左上角起点算起，向右/下为正
- 用百分比时，是“容器尺寸减去图片尺寸”后的剩余空间再按比例分配，不是简单缩放对齐
-
left/right/top/bottom/center是关键字，可混用，如left top、center bottom
background-position 和 background-size 一起用的坑
如果用了 background-size: cover 或 contain，图片实际渲染尺寸变了，background-position 的基准也会变——尤其是百分比值，容易偏得离谱。比如原图 1000×600，容器 400×300，cover 会等比放大到 500×300（宽溢出），此时 background-position: 100% 0 实际对齐的是“放大后图片的最右边缘”，不是原图的右边缘。
- 要精确控制大图局部显示，优先用
background-size: auto或固定像素值（如1200px auto） - 用
cover时，background-position推荐用关键字（center、top right），比百分比更可控 - 调试时打开浏览器开发者工具，鼠标悬停在
background-position属性上，能看到实时预览框
多背景图时 background-position 怎么配
多个背景图用逗号分隔，background-position 也必须严格按相同顺序、用逗号一一对应。漏一个、多一个、顺序错，整条声明都可能被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
示例：
background-image: url(a.jpg), url(b.png);<br>background-position: center, top right;<br>background-size: cover, 20px;
- 每个值只作用于同位置的背景图，不能跨图复用
- 如果某层不需要位移，写
0 0或left top，别留空 - 注意层级：前面的图在上层，
background-position调整的是它自己在容器内的落点，不影响下层图
移动端适配时 background-position 容易失效的原因
不是代码写错了，而是 viewport 缩放、设备像素比、或者父容器尺寸为 0 导致定位区域不存在。最典型的是 flex 容器里子元素没设高度，background-position 没地方锚定。
- 检查父容器是否真实占位：加个
border: 1px solid red看边界 - 避免在
display: inline元素上设背景图定位，先改成inline-block或block - 用
vh/vmin单位替代固定像素，比如background-position: 50% 20vh，比20px更适应不同屏幕
background-position 看似简单，但和 background-size、容器盒模型、渲染时机强耦合；调不准时，先确认图片是否真的加载成功、容器有没有尺寸、有没有被其他 CSS 覆盖掉整条 background 声明。
