<p>手机端背景图底部对齐必须用 background-position: center bottom 或 bottom center；Bootstrap 的 bg-* 类对背景图无效；需配合 min-vh-100、background-size: cover/contain 及块级容器使用。</p>
手机端背景图底部对齐必须用 background-position: bottom center
直接写 background-position: bottom 不够——它只设垂直方向，水平方向默认是 left，结果图片会左底对齐而非居底。真正起效的是双值写法：background-position: center bottom 或 bottom center（顺序不影响）。这个组合在所有现代移动端浏览器（包括 iOS Safari）都稳定解析，比百分比（如 50% 100%）更可靠。
别指望 bg-center 或其他 Bootstrap bg-* 类生效
bg-center 只对应 background-position: center，即 center center，它把图片锚点定在正中心，不是底部。而所有 Bootstrap 的 bg-* 工具类（如 bg-top、bg-bottom）**仅作用于背景色**，对 background-image 完全无效。你加了 bg-bottom，开发者工具里看到的仍是 background-position: center center，因为那类名根本没生成任何 background-position 样式。
必须配合 min-height 和 background-size 才能看见效果
即使写了 background-position: center bottom，如果容器高度不够或没撑开，图片还是“掉”不到底部。关键三点：
- 容器需有明确高度参照：用
min-vh-100（不是vh-100），避免 iOS Safari 地址栏切换导致高度跳变 - 必须设
background-size: cover或contain，否则图片可能太小、重复，或拉伸变形，让“底部对齐”失去意义 - 确保背景图加在块级容器上（如
<div class="hero">），而不是<img>标签——bg-*类和 background 相关 CSS 对<img>无效
响应式场景下要单独覆盖手机断点
Bootstrap 不提供 bg-pos-sm-bottom 这类响应式 background-position 工具类。想在小屏强制底部对齐、大屏换居中，得手动写媒体查询：
@include media-breakpoint-down(sm) {
.hero-bottom {
background-position: center bottom !important;
}
}
@include media-breakpoint-up(md) {
.hero-bottom {
background-position: center center !important;
}
}注意加 !important，否则容易被其他 background 相关样式（比如 inline style 或第三方库）覆盖；类名顺序也重要——后写的规则优先级更高，所以手机断点规则要放在大屏之后才保险。
真正麻烦的不是写那一行 background-position，而是当 background-size: cover 在窄屏下裁掉图片顶部时，“底部对齐”实际锚定的是原始图的底边——如果你的图本身构图偏上，结果可能只剩天空一片白。这时候得换图，或者改用 background-size: contain 配合 padding-bottom 模拟留白。
