要用 background-size 和 background-position 控制局部显示，需放弃 cover/contain，改用 background-size: auto 或 200% 100% 配合 background-position 手动锚定可视区域，并确保容器有明确高度、无意外 overflow 截断且图片路径有效。
怎么用 background-size 和 background-position 控制局部显示
“局部显示”不是 bootstrap 提供的功能，而是 css 背景行为的精细控制。关键在于放弃 cover 或 contain 这类“全图适配”逻辑，改用 background-size: auto 或 200% 100% 配合 background-position 手动锚定可视区域。
-
background-size: auto保持图片原始尺寸，再用background-position: 20% 30%把想要的部分“推”进容器可视区 - 若需固定宽高框内只露左半边，用
background-size: 200% 100%+background-position: 0 0，再靠容器overflow: hidden截掉右边 - 千万别只设
no-repeat就以为能定位——没background-position，默认还是0 0（左上角），容易跑偏 - 所有裁剪效果的前提是：目标元素必须有明确高度，比如
min-height: 400px或height: 100vh，否则空内容时背景根本不会渲染
为什么不能直接在 .container-fluid 上设背景图
直接给 .container-fluid 加背景图，结果图只出现在文字周围、左右留白，是因为该类本身不设高度，完全依赖内容撑开。局部裁剪需要一个“有边界的框”，而它没有。
- 正确做法是套一层自定义容器：
<div class="bg-local"><div class="container-fluid"></div></div> - 在
.bg-local里写完整背景控制：指定background-image、background-size、background-position和min-height - 避免用
background-attachment: fixed——滚动时定位会漂移，尤其在 iOS 上表现不稳定 - 如果用了
border-radius，记得加background-origin: border-box，否则圆角区域的背景会从 content-box 起算，视觉上像被切了一角
移动端裁切错位的三个真实原因
手机端背景图“看起来被切掉”往往不是参数问题，而是布局链断裂。真机调试时发现 computed styles 里 background-image 没生效、height 不是 100vh、父容器意外带 overflow: hidden，比调 background-position 更值得优先排查。
-
body或根容器漏了min-height: 100vh，内容少时容器塌陷，背景无处可铺 -
background-attachment: fixed在 iOS 15+ 有已知渲染 bug，配合 JS 滚动监听或transform时背景可能直接消失 - 图片路径 404 后浏览器静默降级为纯色背景，你以为是裁切问题，实际图根本没加载出来
object-fit 和 background-image 的裁剪逻辑区别
别混淆两种裁剪：对 <img> 标签用 object-fit: cover 是图像内容自身缩放裁剪；对容器用 background-image 是 CSS 背景层的定位裁剪。两者机制不同，不能互相替代。
-
object-fit只作用于<img>元素，需配合固定宽高的父容器 +overflow: hidden才生效 -
background-size: cover是背景图整体缩放后居中裁切，裁切区域不可控（总是中心），不适合“只露左上角人脸”这类需求 - Bootstrap 5 没内置
object-fit工具类，要用就得自己加object-fit-cover类或写内联样式 - IE 完全不支持
object-fit，如果项目还要兼容，得 fallback 到背景图方案
background-position 的百分比数值更常导致失败。
