background-position决定焦点位置，background-size决定缩放逻辑，精准聚焦需先固定容器尺寸再选定位策略；center center配cover常裁人脸因构图不匹配，应改用语义化关键词如center top；移动端须媒体查询微调，html/body需设height和margin重置，背景优先设在html上，慎用fixed；高清图用image-set()按dpr自动选，容器宽高不确定则定位失效。

直接说结论：background-position 决定焦点位置，background-size 决定缩放逻辑，二者必须配合使用；但真正“精准聚焦”不靠调参数，而靠先 fix 容器尺寸、再选定位策略。

为什么 background-position: center center 总是切掉人脸？

不是写错了，是 background-size: cover 只保证填满，不保证构图。默认 center center 把图片中心对齐容器中心——当人物在画面下半部分时，竖屏小屏一缩放就直接裁掉脸。

• 改用语义化关键词组合：center top（保上半身）、left center（保左构图）、center 20%（把焦点上提）
• 避免用百分比值如 50% 30%：它按容器尺寸算，不是按图片内容，容易误判主体位置
• 移动端必须加媒体查询微调：@media (max-width: 768px) { background-position: center 10%; }

body 上 background-size: cover 不居中？先查 html/body 高度

90% 的“不居中”其实是容器塌陷导致的假象。浏览器默认 body 高度由内容撑开，height: 100% 没参照物，min-height: 100vh 在 iOS 滚动时还会抖动。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 必须写这两句：html, body { margin: 0; padding: 0; } + html { height: 100%; }
• 背景优先设在 html 上，不是 body 或某个 div——嵌套容器会干扰定位基准
• 如果用了 background-attachment: fixed，安卓老 WebView 渲染异常率高，慎用

如何让高清屏加载高清图，又不拖慢普通设备？

background-size 本身不控制加载哪张图，只缩放已加载的那张。浪费流量或糊图，根源在 background-image 的选择策略。

• 现代方案用 image-set()：background-image: image-set(url(img/bg-1200.jpg) 1x, url(img/bg-2400.jpg) 2x); ——浏览器按 DPR 自动选，不发多余请求
• 兼容性兜底时，别堆 srcset 或 JS 切图，退回到 100vh + 媒体查询 + 单图压缩（WebP 格式）更稳
• 所有定位效果都依赖容器尺寸稳定：如果父容器用了 flex 或 grid 却没设 min-height，或者子元素触发 BFC 塌陷，background-position 就会“飘”

最容易被忽略的一点：定位是否生效，永远取决于容器有没有确定的宽高——图再准，容器塌了，一切归零。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！