background-position 必须手动设置，bootstrap 的 bg-center 等类仅作用于背景色，对背景图无效；全屏背景需显式声明 cover + center center + no-repeat + min-height: 100vh。
background-position 必须手动写，Bootstrap 没有 bg-top/bg-right 这类背景图对齐类
Bootstrap 的 bg-center、bg-top 等类只作用于背景色，对 background-image 完全无效——它们内部只是设置 background-color，不碰 background-position。所以你加了 bg-center 却发现图片没居中，不是类没生效，而是它根本不管背景图。
真正控制对齐的只有原生 CSS 的 background-position，且必须显式声明：
-
background-position: center center（推荐，兼容性好，移动端 Safari 解析稳定） -
background-position: top left或right bottom（关键词组合，比百分比更可靠） -
background-position: 20px 30px（像素偏移，适合微调锚点） - 避免用
background-position: 50% 50%—— iOS Safari 在地址栏收起时可能临时错位
cover + center center 是全屏背景的最小安全组合
只设 background-size: cover 不等于“图片铺满且居中”。cover 只负责等比缩放并裁剪，但裁哪一块由 background-position 决定。没设 position 时浏览器默认用 center center，但依赖这个默认值风险高——一旦被其他样式覆盖（比如 Bootstrap 的 bg-center 类带 !important），就会偏移。
务必显式配齐这四条：
background-size: coverbackground-position: center centerbackground-repeat: no-repeat-
min-height: 100vh（不是height: 100vh，防内容超长时底部露白）
漏掉任意一条，都可能出现拉伸、留白、平铺或高度不足。
background-attachment: fixed 要慎用，尤其在移动端
想让背景图固定不随滚动，background-attachment: fixed 是唯一标准方案，但它在 iOS Safari 上支持不稳定：滚动卡顿、视差错位、甚至整块背景消失。这不是配置问题，是渲染引擎限制。
如果必须用 fixed：
- 不要直接加在
.container或.row上——它们没有独立定位上下文，fixed 会相对于 viewport 定位，导致内容滚动时背景“脱节” - 必须套一层全屏 wrapper：
<div class="hero-bg" style="min-height: 100vh; background-attachment: fixed"> <li>搭配 <code>background-position: center center和background-size: cover，否则 fixed 下偏移更明显 - 考虑降级方案：用
background-attachment: scroll+ 半透明遮罩提升文字可读性，比强推 fixed 更稳妥 -
min-height: 100vh比height: 100vh更安全，至少撑满一屏，内容超长时能延展 -
height: 100dvh（dynamic viewport height）响应地址栏变化，但仅支持 Chrome 108+、Safari 16.4+，旧设备 fallback 必须存在 - 别指望 JS 动态监听 resize 修正——iOS Safari 的 resize 事件触发不可靠，且性能开销大
- 若用
<img>替代背景图，改用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，兼容性反而比 fixed background 更稳
移动端 vh 高度跳变，优先用 min-vh-100 或 100dvh
100vh 在 iOS Safari 中会按页面加载时的视口高度计算，地址栏收起后实际可用高度变大，但背景不会重绘，导致底部短暂留白或裁切。这不是 bug，是规范行为。
缓解方式有限且有取舍：
对齐和固定看似简单，但真正卡住人的永远是那行没写的 background-position，和那句被忽略的 min-height: 100vh。
