局部显示背景图需手动控制 background-size 和 background-position，而非依赖 Bootstrap 语义类；关键在于设置明确高度、禁用平铺、精准定位并配合 overflow: hidden 裁切。
背景图片局部显示的本质是控制 background-size 和 background-position
bootstrap 本身不提供“局部背景图”这类语义类，它只管颜色（如 bg-primary）和基础布局。所谓“局部显示”，其实是 css 背景行为：默认会平铺或拉伸填满整个元素；要让它只露一部分，就得手动覆盖默认行为。
常见错误现象：
— 图片被 background-size: cover 拉满，想看左上角却只看到中心裁切部分
— 加了 no-repeat 但图片还是跑偏，因为没设 background-position
— 在 .container-fluid 上设背景，结果只在内容区域显示，边距空白处没图（其实是父容器没设高）
- 用
background-size: auto保持原尺寸，再配background-position: top left锚定起始点 - 若需固定宽高区域展示（比如只显示图片左半边），推荐
background-size: 200% 100%+background-position: 0 0，然后靠容器overflow: hidden截掉多余部分 - 务必确保目标元素有明确高度（如
min-height: 400px或height: 100vh），否则空内容时背景根本不会渲染
在 Bootstrap 容器（如 .container-fluid）上实现局部背景的实操步骤
很多人直接给 .container-fluid 加背景图，却发现图只出现在文字周围——因为该类默认不设高，高度由内容撑开。局部显示的前提是“有框可裁”。
- 不要直接改
.container-fluid，而是套一层自定义 div：<div class="bg-local"> <div class="container-fluid">...</div> </div>
- 在
.bg-local中写 CSS：.bg-local { background-image: url('bg.jpg'); background-repeat: no-repeat; background-position: 20% 30%; /* 手动调出想要的局部区域 */ background-size: 150% auto; /* 宽度放大，让横向有裁切空间 */ min-height: 100vh; overflow: hidden; } - 避免用
background-attachment: fixed—— 它会让局部定位在滚动时错乱，尤其在移动端
为什么 contain 和 cover 不适合“局部显示”
这两个值的设计目标是“完整适配容器”，不是“露出局部”。contain 会缩放整图进容器且留白；cover 会缩放并裁切，但裁切逻辑固定（居中），无法指定要哪一块。
- 想稳定显示图片左上 300×200 像素区域？必须用
background-size: auto或具体像素值（如1200px 800px） - 响应式场景下慎用像素值，优先用百分比缩放 + 精确
background-position - 注意：Safari 对
background-size百分比支持较弱，建议加background-size: 200% 100%, auto这类降级写法
局部显示的关键不在 Bootstrap 类，而在你是否愿意放弃“自动适配”思维，转而用 CSS 显式控制尺寸、锚点和裁切边界。很多效果破功，其实只是忘了给容器设 min-height 或误信了 cover 能精准取景。
