直接修改.modal-backdrop的background-color必须用rgba()+!important，因Bootstrap5+默认用内联样式或CSS变量控制，普通规则权重不足；漏写alpha通道会导致不透明；需确认backdrop启用且元素存在；彻底隐藏需同时处理backdrop透明度与body偏移；推荐使用--bs-backdrop-bgCSS变量自定义。
直接改 .modal-backdrop 的 background-color 就行，但必须用 rgba() + !important，否则无效。
为什么改了 opacity 还是没变暗/变浅
因为 Bootstrap 5+ 默认用内联样式或 CSS 变量控制 .modal-backdrop，普通 CSS 规则权重不够；同时很多人误写 rgb(0,0,0) 或十六进制色值，漏掉 alpha 通道，浏览器就当不透明处理。
- 必须写成
background-color: rgba(0, 0, 0, 0.3) !important;（数值 0.3 可调） - 检查模态框是否启用了 backdrop：若 HTML 中有
data-bs-backdrop="false"，这层 DOM 根本不会生成，样式再对也无用 - 确认浏览器开发者工具里，
.modal-backdrop元素确实存在且被选中——有时它被 JS 动态插入，需在 modal 弹出后刷新检查
想彻底去掉遮罩背景（比如做悬浮卡片式 Modal）
仅设 opacity: 0 不够，body 仍会加 modal-open 类导致滚动条消失、页面右移。要真正“隐形”，得两步清空：
- 隐藏 backdrop：
.modal-backdrop { opacity: 0 !important; } - 修复 body 偏移：
body.modal-open { overflow-y: auto !important; padding-right: 0 !important; } - 如果 modal 内容本身带白底（如
.modal-content），记得同步设background-color: transparent，否则看起来还是“有背景”
用 CSS 变量自定义更干净（Bootstrap 5.3+ 推荐）
Bootstrap 提供了 --bs-backdrop-bg 变量，比硬写 !important 更可持续：
- 在
:root或 modal 容器上设置：--bs-backdrop-bg: rgba(0, 0, 0, 0.2); - 无需
!important，也不怕被内联样式覆盖 - 注意：这个变量只在启用 backdrop 时生效（即
backdrop: true或未设data-bs-backdrop="false"） - 旧版本 Bootstrap（<5.3）不支持该变量，仍需走
background-color覆盖路径
最容易被忽略的是：改完样式后没验证 backdrop 是否真被渲染出来——尤其在 SPA 嵌套路由或动态组件中，.modal-backdrop 可能被挂载到 body 外部或延迟生成，光看 CSS 是看不出问题的。
