应使用 background-image 设置 modal 背景图，因其更可控：需设在 .modal-dialog 上（非 .modal-content），配合 background-size: cover 和 background-position: center，并设 background-color: transparent 避免遮盖，且不可用 background-attachment: fixed 以防移动端失效。
Modal 背景图用 background-image 还是 img 标签？
直接用 background-image 设置模态框容器背景，比在 Modal 内部塞一个 <img> 更可控。因为 Modal 自带滚动、居中、遮罩逻辑，如果用 <img>，容易被 .modal-content 的 padding 挤变形，或因 overflow: hidden 裁剪边缘。
关键点：背景图必须设在 .modal 或 .modal-dialog 上，不能只设在 .modal-content —— 后者默认有白色背景和圆角，会盖住背景图。
-
.modal层级最高，适合全屏背景（含遮罩层），但需注意 z-index 和透明度影响 -
.modal-dialog更常用：它居中、响应式缩放，设背景后能随尺寸自适应 - 务必加
background-size: cover和background-position: center，否则图片拉伸或偏移
如何让背景图不随 Modal 内容滚动？
Modal 默认内容区可滚动，但背景图要“固定”在视口或对话框上。这里分两种需求：
- 固定在对话框本身（推荐）：给
.modal-dialog设background-attachment: scroll（默认值），再配合background-size: cover，图片随对话框缩放，不滚动 - 固定在视口（类似 parallax）：用
background-attachment: fixed，但会导致在 iOS Safari 和部分安卓浏览器上失效或卡顿，不建议 - 绝对不要给
.modal-body设背景图——它高度可变，且受max-height和overflow-y: auto影响，背景会错位
示例 CSS：
.modal-dialog {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* 不要加 background-attachment: fixed */
}
Bootstrap 5 和 4 的 class 差异要注意什么？
Bootstrap 5 移除了 .modal-dialog-centered 的 flex 布局依赖，改用 class="modal-dialog modal-dialog-centered" 即可居中；而 Bootstrap 4 需确保父容器 .modal 有 display: flex。背景图在这两版行为一致，但以下细节易踩坑：
- Bootstrap 5 默认
.modal-content有background-color: #fff，必须显式设为transparent，否则盖住背景图 - Bootstrap 4 的
.modal-dialog默认有margin: 1.75rem，可能导致背景图边缘留白；Bootstrap 5 改为margin: auto，更干净 - 如果 Modal 用
static背景（如data-bs-backdrop="static"），遮罩层.modal-backdrop仍会盖住背景图——此时背景图必须设在.modal上，并调低z-index让它低于.modal-backdrop
图片加载失败或尺寸异常怎么办？
背景图不显示，90% 是路径或尺寸问题。调试顺序建议：
- 先确认图片 URL 在浏览器地址栏能直接打开，排除 404
- 检查 DevTools 中
.modal-dialog元素是否真的渲染了，有些框架（如 Vue + Bootstrap）可能延迟挂载，导致样式未生效 - 用
min-width和min-height给.modal-dialog设最小尺寸（如min-width: 300px; min-height: 200px），避免内容为空时容器塌陷，背景图消失 - 移动端要注意：Bootstrap 的
.modal-dialog在小屏下宽度为auto，但高度可能不足，建议加min-height: 50vh防止背景图被压缩成一条线
真正麻烦的是高清屏适配——cover 在 DPR > 1 下可能模糊。解决办法只有换图：background-image: image-set(url(bg@1x.jpg) 1x, url(bg@2x.jpg) 2x)，但兼容性有限，多数场景用单张高质量图更稳妥。
