background-size: cover 仅实现等比缩放并至少一边撑满容器，无法直接控制局部显示比例；需配合 background-position 百分比锚定（如 50% 30%）或像素偏移（如 -50px 0），且容器必须有明确高度（如 min-height: 100vh）、避免 overflow: hidden 干扰，并注意移动端 fixed 渲染 bug 和背景加载状态。
background-size: cover 是裁剪比例控制的起点，不是可选项
想让背景图按特定比例“局部显示”，比如只露出中间 70%、或固定展示人脸区域，background-size: cover 本身不提供比例参数——它只保证等比缩放 + 至少一边撑满容器。所谓“限制显示区域”，本质是用 background-position 配合固定尺寸容器做手动锚定，而不是靠 cover 自动算。
常见错误是以为写个 background-size: 150% 150% 就能“放大后裁切”，结果发现图片跑偏、上下留白、或移动端完全失效。真正可控的做法只有两种：
-
background-size: cover+background-position: x% y%（比如50% 30%把焦点上移） -
background-size: 200% auto+background-position: -50px 0（手动偏移像素值，需配合overflow: hidden）
怎么用 background-position 控制可视区域比例
background-position 的百分比值不是“裁掉多少”，而是“把图片的哪个点对齐容器中心”。例如 background-position: 20% 30% 表示：图片横向 20% 的位置对齐容器横向 50%，纵向 30% 的位置对齐容器纵向 50% —— 这才是精准拉出局部区域的关键逻辑。
实操建议：
- 想让图片顶部 30% 进入可视区 → 用
background-position: center top或50% 0% - 想固定露出左上角区域 →
background-size: 200% 200%+background-position: 0 0+ 容器overflow: hidden - 手机端人脸常被裁掉？改
background-position: center 20%把构图重心往上提 - 别依赖
background-position: 50% 50%万能居中——原始图宽高比和屏幕差距大时，它只是数学居中，不是视觉居中
容器高度必须显式设置，否则所有裁剪都无效
所有 background-size 和 background-position 的效果，都建立在容器有明确渲染高度的基础上。Bootstrap 的 .container-fluid、.row 默认高度为 0，内容少时背景图根本不会铺开。
正确写法：
- 全屏背景 →
min-height: 100vh（比height: 100vh更安全，防内容超长） - 固定比例区域（如 16:9）→
aspect-ratio: 16 / 9或padding-top: 56.25%+position: relative - 千万别给
直接设background-image后就不管高度——先确认html, body { min-height: 100vh; } - 如果用了
border-radius，记得加background-origin: border-box，否则圆角处背景会从内容区起算，视觉上像被切掉一角
移动端裁切错位，90% 是布局链断裂，不是参数问题
真机调试时发现背景图“被切掉一半”，大概率不是 background-position 写错了，而是以下某个环节断了：
-
body或父容器漏了min-height: 100vh，内容少时容器塌陷 - 用了
background-attachment: fixed—— iOS 15+ 有已知渲染 bug，滚动时背景可能直接消失 - 图片路径 404，浏览器静默降级为纯色背景，你以为是裁切问题，实际图根本没加载
- 父容器意外带
overflow: hidden，把背景图直接截断了（尤其套了多个div时容易忽略）
复杂点在于：这些条件必须同时满足才能生效——高度、定位、图片、溢出控制，缺一不可。最容易被忽略的是容器高度依赖链和移动端 fixed 渲染陷阱。
