.backdrop-filter 在 .navbar 上常不生效，因 background-color 覆盖、子元素遮挡、safari 缺少 -webkit- 前缀、fixed-top 下方无内容及响应式干扰；需设 transparent 背景、双前缀模糊、折叠区单独设背景、子元素禁用模糊。
直接给 .navbar 加 backdrop-filter 基本无效——不是写法错，而是背景覆盖、层级遮挡、前缀缺失和响应式断点干扰共同导致的。
为什么 backdrop-filter 在 .navbar 上常不生效
Bootstrap 默认的 .navbar（尤其是 .navbar-light 或 .navbar-dark）自带 background-color，会完全盖住背后内容，backdrop-filter 就没了作用对象；同时，.navbar-collapse 展开时若没设背景，小屏下直接“透底”，文字不可读。
-
background-color必须显式设为transparent或rgba(…, 0)，不能依赖默认值 -
.navbar-brand、.nav-link等子元素若带白色背景（比如某些主题插件加的），会局部遮挡模糊效果 - Safari 必须写
-webkit-backdrop-filter，否则直接不渲染 -
.navbar若为.fixed-top，需确认它下方确实有滚动内容——背后是空白，模糊就不可见
如何让 .navbar-glass 在桌面和移动端都保持模糊感
核心是分层控制：容器透明 + 子元素不抢背景 + 折叠区域兜底。不要试图用一个类搞定所有场景。
- 给导航栏加自定义类
.navbar-glass，并移除所有background-color声明：background: transparent - 声明双前缀模糊：
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px) - 对
.navbar-collapse单独设背景（仅小屏）：@media (max-width: 991.98px) { .navbar-glass .navbar-collapse { background-color: rgba(255, 255, 255, 0.92); } } -
.navbar-glass .nav-link和.navbar-glass .navbar-brand必须设backdrop-filter: none，否则文字本身也会被模糊 -
blur值建议用8px–14px：小于8px几乎看不出效果，大于14px在高分屏上易导致文字边缘发虚
.navbar-collapse 展开后背景丢失或点击无效
这不是模糊效果的问题，但常和它一起出现——因为开发者为了“统一风格”改了 data-bs-toggle 或引入了第三方库（如 MDBootstrap），结果破坏了原生折叠逻辑。
- 确保使用标准 Bootstrap 5 的属性：
data-bs-toggle="collapse"和data-bs-target="#navbarContent"（注意bs前缀，不是mdb或旧版data-toggle） - 检查是否误用了
filter: blur()——那是对整个元素做图像处理，不是“背景毛玻璃” - 确认容器没被包裹在
transform或will-change触发的合成层里，某些场景会禁用backdrop-filter - 不要指望
background-image: url()被模糊——backdrop-filter模糊的是“容器后面的页面内容”，不是它自己的背景图
真正麻烦的不是写几行 CSS，而是把「模糊」和「响应式折叠逻辑」拆开处理——前者管视觉穿透，后者管 DOM 显示/隐藏，混在一起，一动全崩。
