Bootstrap 官方 CSS 中不存在 bg-image、BackgroundImage 等类名，必须手写 CSS 配合媒体查询切换 background-image，并设置 min-height、background-size: cover、background-position 和 background-repeat 等属性确保显示正确。
Bootstrap 官方 CSS 里没有 bg-image、BackgroundImage 这类类名，你没法靠加一个 class 就让背景图自动适配屏幕。必须手写 CSS，配合 Bootstrap 的断点和栅格控制容器尺寸、高度、位置，再用媒体查询切换图片源。
为什么直接写 background-image 却看不到图
常见现象：写了 background-image: url("hero.jpg")，但页面一片空白或只显示底色。
- 容器没高度——
div默认height: auto，里面没内容时高为 0，图根本没地方画。必须加min-height: 100vh或明确的height - 被
bg-*类覆盖——class="bg-light"会设置background-color，它和background-image同属background简写属性，颜色优先级更高，图直接被盖住 - 父容器用了
.container或.row——它们自带 padding/margin，导致背景区域缩进，图边缘被“切掉”。全屏背景建议绕过.container，或加mx-n3 px-0抵消 -
background-repeat: repeat是默认值——小图会在大屏上密密麻麻铺满，不是“没图”，是图太多太碎
如何按断点换图且不浪费流量
不能指望 srcset 或 picture 对 CSS 背景图起作用，唯一可靠方式是媒体查询手动覆盖 background-image 值。
- 移动端用小图：
.profile-hero { background-image: url("bg-mobile.webp"); } - 平板（≥768px）换中图：
@media (min-width: 768px) { .profile-hero { background-image: url("bg-tablet.webp"); } } - 桌面（≥992px）用高清图：
@media (min-width: 992px) { .profile-hero { background-image: url("bg-desktop.webp"); } } - 路径必须带引号，空格或特殊字符会解析失败；优先用
.webp格式，比 JPEG 小 25%~30% - 别在 JS 里动态改
style.backgroundImage——服务端渲染（SSR）下首屏不可见，也不利于爬虫抓取
卡片内背景图怎么不拉伸、不偏移、不塌陷
个人中心常把头像区或简介区做成带背景图的 .card，直接加 background-image 很容易人脸被裁、文字压不住、小屏上卡片缩成一条线。
- 必须显式声明：
background-size: cover（填满不畸变） +background-position: center center（居中裁切） +background-repeat: no-repeat（禁重复） - 防塌陷：
.profile-card { min-height: 200px; }，小屏下设更小值（如160px），避免高度归零 - 保宽高比：现代浏览器用
aspect-ratio: 3 / 4；Safari 15.4 之前需加-webkit-aspect-ratio；旧版退化用padding-top: 133%+position: relative+ 绝对定位内容 - 文字可读性：加伪元素遮罩
.profile-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }，文字放z-index: 2层
头像+资料区横排/竖排切换时背景图错位
大屏想让头像左、资料右，小屏改成头像上、资料下，用 d-flex flex-column flex-md-row 是对的，但背景图可能在横排时偏右、竖排时偏上——因为 background-position 是相对当前容器算的，而容器宽高比变了。
- 不要只写一次
background-position: center，得在断点里重设：@media (min-width: 768px) { .profile-section { background-position: center 30%; } }（把焦点往上提一点，保全脸部） - 头像本身别用
float或text-center居中——它们会破坏 flex 布局流，改用mx-auto d-block+w-25 h-25（Bootstrap 5.3+） - 资料区文字用
ps-4 ps-md-0控制左右间距，小屏无缩进，大屏有呼吸感，避免背景图边缘被文字挤出视觉边界 - 加载失败降级：用多值语法
background-image: linear-gradient(#4b6584, #2c3e50), url("avatar.jpg")，渐变打底，图挂了也不突兀
最麻烦的不是怎么写 CSS，而是不同设备对“居中”“全屏”“适配”的定义根本不一致——iOS 地址栏收起时 vh 变、Android 键盘弹出时视口跳、Safari 对 object-fit 和 aspect-ratio 支持滞后。这些细节不测真机，光看 Chrome DevTools 模拟器会漏掉关键问题。
