Modal背景图应设在.modal上并设background-size:cover，同时将.modal-content背景设为transparent、移除边框阴影，用flex居中文字，并注意Bootstrap 4/5变量差异及CORS限制。
Modal 背景图不能用 background-image 直接设在 .modal 上
Bootstrap 的 .modal 默认有白色背景、内边距和阴影，直接给它加 background-image 会被 .modal-content 遮住，文字也很难居中。真正起作用的是 .modal-dialog 和 .modal-content 的层级关系——图片必须设在能“透出”的容器上，且要覆盖整个模态框可视区域。
推荐做法：把背景图加在 .modal 上，同时移除 .modal-content 的背景色和边框，并用 flex 布局控制文字居中。
-
.modal设background-image、background-size: cover、background-position: center -
.modal-content设background: none、border: none、box-shadow: none -
.modal-body用display: flex+flex-direction: column+justify-content: center+align-items: center居中文本 - 记得给
.modal-body设min-height（比如min-height: 300px），否则内容少时图片会塌缩
文字居中后被背景图“吞掉”？检查 z-index 和颜色对比
即使用了 flex 居中，文字也可能看不见——常见原因是文字颜色和背景图色调接近，或 .modal-content 的透明度/遮罩干扰了层级。
- 不要依赖
opacity或rgba()给.modal-content加半透明，这会让文字也变淡；改用伪元素叠加黑色半透明遮罩更可控 - 给文字加
text-shadow: 0 2px 4px rgba(0,0,0,.5)提升可读性 - 确保
.modal-body没有意外的z-index或position: relative导致层级错乱 - 如果用 Bootstrap 5，
.modal-content默认有background-color: var(--bs-modal-bg)，必须显式覆盖为transparent
Bootstrap 5 和 Bootstrap 4 的关键 CSS 差异
两者结构一致，但变量和默认样式不同，尤其影响背景和间距。
- Bootstrap 5：
--bs-modal-bg是#fff，需重置为transparent；.modal-dialog默认有margin: 1.5rem，可能让背景图留白，建议设margin: 0 - Bootstrap 4：
$modal-content-bg是$modal-content-bg: #fff !default，同样要覆盖；.modal-dialog的margin是10vh，也要清零 - 都建议加
.modal.fade.show { display: flex }确保 flex 生效（因为默认是display: block）
完整最小可行样式示例（Bootstrap 5）
.modal-custom {
background: url('your-image.jpg') no-repeat center center;
background-size: cover;
}
.modal-custom .modal-dialog {
margin: 0;
}
.modal-custom .modal-content {
background: transparent;
border: none;
box-shadow: none;
}
.modal-custom .modal-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 300px;
padding: 2rem;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
然后在 HTML 中给 div class="modal" 加上 class="modal-custom" 即可。注意图片路径必须可访问，且服务器允许跨域（本地 file:// 打开会因 CORS 失败）。
最常被忽略的一点：Modal 默认靠 JS 触发显示，而 show 类添加后，.modal 才真正渲染出来——所以背景图样式必须写在 .modal 上，而不是只作用于隐藏状态下的元素。
