background-position本身不控制“焦点”，仅决定背景图起始位置；“焦点”需配合background-size: cover及稳定容器尺寸、合理响应断点共同实现。
background-position 本身不控制“焦点”，它只决定背景图的起始位置；所谓“焦点”其实是靠它配合 background-size: cover 裁剪时保留哪一部分实现的。
为什么 background-position: center center 总是切掉人脸
不是写错了，而是 background-size: cover 只保证填满容器，不保证构图。默认 center center 把图片中心对齐容器中心——当人物在画面下半部分（比如半身照、低头姿势），竖屏小屏一缩放，脸就直接被裁掉。
- 用语义化关键词替代模糊的
center center：center top（保上半身）、left center（保左构图）、center 20%（把焦点上提） - 避免用
50% 30%这类百分比值：它按容器尺寸算，不是按图片内容，主体位置难预判 - 真正有效的是先 fix 容器宽高（比如设
height: 60vh），再选定位策略；否则容器尺寸浮动，background-position失效
background-position 值不生效的常见原因
改了值但没反应，大概率不是语法错，而是底层条件没满足：
-
display: inline元素默认无宽高，背景图无处可放——必须设display: block或inline-block，并明确width/height -
background-attachment: fixed会把参考系从元素变成视口，background-position就不再相对于容器计算 - 没设
background-repeat: no-repeat，图平铺后“定位”失去意义 -
background-origin默认是padding-box，如果想从内容区左上角算，得显式写background-origin: content-box
移动端必须用媒体查询微调
同一张图在桌面和手机上“焦点”需求不同，不能指望一套值通吃：
立即学习“前端免费学习笔记（深入）”；
- 典型写法：
@media (max-width: 768px) { .hero { background-position: center 10%; } } - 慎用
background-size: cover在body上——html和body需先重置margin: 0、height: 100%，否则容器高度塌陷，定位失效 - 高清屏（DPR > 1）建议用
image-set()替代单图：background-image: image-set("bg@1x.jpg" 1x, "bg@2x.jpg" 2x);
最易被忽略的点：背景图“焦点”不是调一个属性就能解决的事，它依赖容器尺寸稳定、裁剪逻辑清晰、响应断点合理——三者缺一，background-position 再准也没用。
