因为.backdrop-filter只对元素背后的真实内容生效，而.modal-backdrop是纯色遮罩层，自身挡住了底层；应将其设为半透明，并将backdrop-filter加在.modal-content上，配合rgba背景和-webkit前缀。
为什么直接给 .modal-backdrop 加 backdrop-filter 没反应
因为 .modal-backdrop 本身是纯色遮罩层（默认 background-color: rgba(0,0,0,0.5)），它背后没有“可模糊的内容”——backdrop-filter 只对**该元素背后的真实页面内容**生效，不是对它自己的颜色做处理。你加了 backdrop-filter: blur(6px)，但它底下被自己挡死了，滤镜无从取样。
常见错误现象包括：CSS 写对了、浏览器支持（Chrome/Safari），但背景依然清晰；或者只在模态框关闭瞬间看到一帧模糊，弹出后立即消失。
- 别碰
.modal-backdrop的backdrop-filter—— Bootstrap 5 默认设了blur(0.5rem)，但这是个干扰项，实际生效需依赖其背后的透出，而它默认不透 - 真正要模糊的是
.modal-content或.modal-dialog所在的区域，且必须让它“半透明地透出下面的页面” - 确保
.modal-backdrop的opacity别设成 1，否则彻底挡住底层；建议保持默认或显式设为opacity: 0.5
给 .modal-content 加毛玻璃效果的最小可行写法
不改 HTML 结构、不写 JS，纯 CSS 就能跑通。关键就三点：半透背景 + 滤镜声明 + 避开裁剪陷阱。
-
.modal-content必须设background-color: rgba(255, 255, 255, 0.92)（alpha 值在 0.8–0.95 之间最稳，全透明或不透明都会失效） - 同时写
backdrop-filter: blur(6px)和-webkit-backdrop-filter: blur(6px)，Safari 不加-webkit-前缀就是白写 - 删掉或重置
.modal-content上可能存在的overflow: hidden，否则模糊边缘会被硬裁，看起来像贴了层灰边框 - 如果用了
border-radius，建议不超过12px，过大配合overflow: hidden更容易暴露裁剪问题
.modal-content {
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
iOS Safari 和旧安卓 WebView 模糊不显示怎么办
iOS Safari 直到 16.4+ 才稳定支持 backdrop-filter 在非 position: fixed 元素上生效；部分安卓 WebView（尤其 Android 10 及以下）直接忽略该声明。这不是你代码的问题，是渲染引擎限制。
- 用
@supports (backdrop-filter: blur(1px))包裹规则，避免老浏览器解析失败或布局错乱 - 不要试图用
filter: blur()替代——那是对整个元素截图再模糊，文字和按钮全糊，完全不是毛玻璃 - 兼容性兜底只能靠视觉降级：保留
rgba()半透背景作为基础，用户至少能看到“轻量遮罩”，而不是突然变黑或全白 - 检查是否误将模态框包裹在
transform或will-change触发的合成层里——某些场景下浏览器会禁用backdrop-filter
body 滚动条消失导致的“背景跳动”怎么同步修复
模态框打开时，Bootstrap 默认给 body 加 modal-open 类并设 overflow: hidden，右侧滚动条消失 → 页面内容右移约 17px。这个抖动常被误认为是毛玻璃失效的一部分，其实它是独立的布局问题。
- 必须同步加这段 CSS，否则即使模糊生效，用户也会觉得“背景闪了一下”
-
body.modal-open要设overflow-y: auto !important，让滚动条始终存在（只是不可见时占位） - 同时重置
padding-right: 0 !important，抵消 Bootstrap 自动加的滚动条补偿值 - 这两条必须和
.modal-content的模糊样式一起加载，缺一不可
body.modal-open {
overflow-y: auto !important;
padding-right: 0 !important;
}
毛玻璃效果真正的复杂点不在写法，而在“它依赖背后内容实时存在且未被遮挡”。哪怕只多一层 z-index 过高的固定定位元素，或者父容器意外设置了 background，都可能让模糊突然消失——得一层层 inspect，而不是只盯着模态框本身。 
