<p>Bootstrap 中 background-position 需通过内联样式或自定义 class 设置，因 Bootstrap 不提供相关工具类；使用 bg-* 类会覆盖 background-image，导致背景图不显示；须确保元素有宽高、路径正确，并注意 background-attachment 和 background-repeat 默认值影响效果。</p>
Bootstrap 里 background-position 怎么写才生效？
直接用 background-position 是有效的，但 Bootstrap 默认不封装这个 CSS 属性——它没提供类似 bg-position-center 这样的工具类。你得自己写内联样式或自定义 class，否则用 bg-* 类（比如 bg-primary）会覆盖掉背景图定位。
为什么加了 bg-dark 还是看不到背景图？
bg-dark、bg-light 等类本质是设置 background-color，会把你的 background-image 盖住。只要用了这些类，背景图就失效了——不是位置不对，是根本没渲染。
- 删掉所有
bg-*类，只保留style="background-image: url(...);" - 确保元素有明确的宽高（比如
min-height: 100vh），否则背景图无处可显 - 检查图片路径是否正确，浏览器控制台看有没有
404错误
怎么用 inline style 快速设 background-position？
最直白的方式就是写在 style 里，支持所有标准值：
style="background-image: url('/img/hero.jpg'); background-position: center top; background-size: cover;"常见组合：
-
background-position: center;—— 水平垂直都居中（最常用） -
background-position: 20px 30px;—— 距左 20px、距上 30px -
background-position: right bottom;—— 右下角对齐 -
background-position: 50% 20%;—— 水平居中、垂直在顶部往下 20%
想复用？自己加个 custom class 更干净
在你的 CSS 文件里加几行，比反复写 inline 更可控：
.bg-pos-center { background-position: center center !important; }
.bg-pos-top { background-position: center top !important; }
.bg-pos-bottom { background-position: center bottom !important; }然后 HTML 里这样用：
<div class="bg-image" style="background-image: url('/img/hero.jpg');">
<div class="bg-pos-center"></div>
</div>注意加 !important 是因为 Bootstrap 的 background 相关样式优先级可能更高；如果用了 Sass，也可以直接 extend 或 mixin 处理。
真正容易被忽略的是：背景图的 background-attachment 和 background-repeat 默认值会影响最终效果，哪怕 position 设对了，如果 repeat 是默认的 tile 模式，也可能看起来像“没生效”。
