background-position 用法包括 center、top left、bottom right 等，首值控水平、次值控垂直；需配合 background-size: cover/contain 使用，并确保容器有明确宽高，响应式需用媒体查询调整。
background-position 用法和常用值
Bootstrap 本身不提供独立的背景对齐类，它依赖 CSS 的 background-position 属性。你得自己写内联样式或自定义 class，或者借助 Bootstrap 的工具类组合实现。默认值是 0% 0%（左上角），但多数人想要居中、覆盖或固定某一边。
常见可直接用的取值包括：center、top left、bottom right、50% 50%（等价于 center center）、left top。注意顺序：第一个值控制水平（x），第二个控制垂直（y）；left 和 top 是关键字，不是方向别名。
-
background-position: center;→ 水平垂直都居中，最常用 -
background-position: top center;→ 顶部居中，适合 banner 类图片 -
background-position: bottom right;→ 右下角对齐，常用于装饰性角标图 - 避免写成
background-position: center top;—— 顺序错会导致解析失败或意外行为
配合 background-size 实现不同裁剪效果
只调 background-position 不够，图片实际显示区域还受 background-size 控制。比如想让背景图“铺满容器且居中”，必须同时设 background-size: cover;；若只想“完整显示且居中”，则用 contain。
-
cover：等比缩放填满容器，可能裁剪边缘 —— 适合 hero 图 -
contain：等比缩放完整显示全图，留白不可避免 —— 适合 logo 或图标 -
100% 100%：强制拉伸变形，慎用 - Bootstrap 5 的
bg-*工具类（如bg-primary）不干预 background-size，需手动加
在 Bootstrap 组件里安全设置背景对齐
比如给 div class="card" 或 section class="jumbotron" 加背景图时，容易忽略容器尺寸和 padding 影响最终可视区域。关键点是：确保父容器有明确宽高（尤其是 height），否则 background-position 会按内容高度计算，结果飘忽。
- 给容器加
min-height: 400px;或height: 100vh;再设 background，否则背景可能只占内容高度 - Bootstrap 的
container默认带左右 padding，会影响background-position: left的实际起始点 —— 建议用container-fluid或额外加mx-0 - 如果用了
position: absolute覆盖层，记得 z-index 高于背景图容器，否则对齐规则被遮挡看不见
响应式场景下 background-position 怎么适配
手机端和桌面端往往需要不同的对齐焦点（比如 PC 看人脸，手机看胸口），纯靠媒体查询写两套 background-position 最可靠。Bootstrap 的响应式工具类（如 d-none d-md-block）对背景图无效，不能用来切换背景图本身。
- 用
@media (max-width: 768px) { .hero-bg { background-position: center top; } } - 避免用
background-position: 20% 30%这种绝对偏移值做响应式 —— 在小屏上可能把主体切掉 - 如果用
object-fit替代 background-image（即改用<img>标签），那对齐要用object-position，语义和行为一致但语法独立
真正麻烦的不是写对这几个值，而是每次换图都要重新肉眼调试 background-position 偏移量 —— 尤其当设计稿给的是“人物眼睛在画面 1/3 处”这种描述时，得反复试 33% 25% 这类组合。建议先用浏览器开发者工具实时拖动 background-position 数值，找到最优解再固化到 CSS 里。
