background-size: cover 是裁剪控制的核心，它等比缩放图片使至少一边撑满容器并裁剪溢出部分；必须配合 min-height: 100vh、background-position: center center 和 background-repeat: no-repeat 才能正确生效。
用 background-size: cover 配合 background-position: center center 是最直接有效的做法，前提是容器高度必须显式设置（比如 min-height: 100vh），否则背景图根本不会按预期裁剪。
为什么 background-size: cover 是裁剪控制的核心
background-size: cover 会等比缩放图片，让宽或高至少有一边完全撑满容器，另一边自然溢出并被裁剪——这是浏览器原生行为，不需要 JS 或额外类。它不是“可选项”，而是实现比例裁剪的起点。
- 误用
background-size: 100% 100%会导致图片强行拉伸变形，人像变宽、文字模糊 -
background-size: contain会完整显示整张图，但必然留白，不满足“裁剪”需求 - cover 的裁剪锚点默认是左上角，所以必须配
background-position: center center，否则关键内容（如人脸、Logo）容易被切掉 - 如果原始图宽高比和屏幕差距极大（比如超宽横幅图在手机竖屏上），上下裁得多是正常现象，不是 bug，是 cover 的设计意图
容器高度必须显式设为 100vh 或 min-height
给 <div class="container-fluid"> 直接加背景图，结果只在文字周围显示、左右留白？大概率是容器高度为 0。Bootstrap 的布局类（如 .container-fluid）本身不设高度，完全依赖内容撑开，而局部裁剪需要一个“有边界的框”。
- 不要直接在
.container-fluid上写背景样式，而是套一层自定义容器：<div class="bg-cover"><div class="container-fluid"></div></div> - 在
.bg-cover中设置：min-height: 100vh（推荐）或height: 100vh；background-image、background-size: cover、background-position: center center、background-repeat: no-repeat - 避免用
background-attachment: fixed—— iOS 上有已知渲染 bug，滚动时背景可能消失或错位
移动端裁剪错位的真实原因往往不是参数问题
真机调试时发现背景图“看起来被切掉”，优先检查 computed styles 而不是反复调 background-position：
-
body或根容器漏了min-height: 100vh，内容少时容器塌陷，背景无处可铺 - 父容器意外带
overflow: hidden，把背景图直接截断了 - 图片路径 404，浏览器静默降级为纯色背景，你以为是裁切问题，实际图根本没加载出来
- 在 Safari 中，若父容器没设
overflow: hidden，偶尔可见裁剪边缘轻微溢出，建议显式加上
想精确控制局部显示区域怎么办
cover 是“自动居中裁剪”，如果你要固定露出图片左上角 20%×30% 区域，就得放弃 cover，改用手动控制：
- 用
background-size: auto保持图片原始尺寸，再靠background-position: 20% 30%把目标区域“推”进可视区 - 或者用
background-size: 200% 100%+background-position: 0 0，让图片横向放大一倍，再靠容器overflow: hidden截掉右边 - 所有这类手动定位的前提：目标元素必须有明确高度（
min-height: 400px或height: 100vh），且不能依赖内容撑开 - 别只写
no-repeat就以为能定位——没background-position，默认还是0 0（左上角），很容易跑偏
真正卡住人的，常常不是 background-position 值该填多少，而是父容器高度塌陷、图片 404、或 overflow 被意外继承——这些比调参更值得优先排查。
