background-size本身不决定定位，只控制缩放；精准定位需配合background-position，且前提为容器高度撑开、图片加载合理。

直接说结论：background-size 本身不决定“定位”，它只控制缩放逻辑；真正实现精准定位，必须和 background-position 配合，且前提是容器高度已撑开、图片加载策略合理。

为什么 background-size: cover 在 body 上总不居中？

不是 background-position: center center 写错了，而是 body 高度塌陷了——它默认由内容撑开，height: 100% 没参照物。哪怕写了 min-height: 100vh，iOS 地址栏滚动时也会抖动。

• 必须同时设置：html, body { margin: 0; padding: 0; } + html { height: 100%; }
• 背景优先设在 html 上，而非 body 或某个 div，避免嵌套容器干扰
• 若用 background-attachment: fixed，部分安卓 WebView 会渲染异常，慎用

cover 下人物/Logo 总被裁切？关键在 background-position 值

cover 只保证等比缩放+填满，不管构图。默认 center center 经常把人脸切掉，尤其竖屏小屏。

• 改用语义明确的关键词组合，比如 center top（把主体往上提）、left center（保左半边信息）
• 百分比值如 50% 20% 是按容器算的，不是图片，容易误判；center top 更稳
• 移动端加媒体查询微调：@media (max-width: 768px) { background-position: center 10%; }

如何让 background-size 支持高清屏又不浪费流量？

background-size: cover 不管你写的是 1200px 还是 4K 图，浏览器只加载 background-image 里指定的那一张。

立即学习“前端免费学习笔记（深入）”；

• 现代方案用 image-set()：它按设备像素比（DPR）自动选图，不发多余请求
• 示例：background-image: image-set(url(img/bg-1200.jpg) 1x, url(img/bg-2400.jpg) 2x);
• 老安卓 WebView 兼容性差时，才退回到 padding-top 技巧或 100vh + 媒体查询兜底

最容易被忽略的一点：所有定位效果都依赖容器尺寸稳定。如果父容器用了 flex 或 grid 且没设 min-height，或者子元素触发了 BFC 塌陷，background-position 就会“飘”——先 fix 容器，再调图。