.backdrop-filter 在 .navbar 上常失效，根本原因是 background-color 覆盖、层级遮挡、前缀缺失及响应式断点干扰；需拆分模糊与折叠逻辑，显式设 transparent 背景、双前缀滤镜、子元素禁用模糊，并为小屏 .navbar-collapse 单独设 rgba 背景。
直接给 .navbar 加 backdrop-filter 通常没效果——不是 css 写错了，而是背景覆盖、层级遮挡、前缀缺失或响应式断点干扰导致的。真正起效的关键，在于把「模糊」和「响应式折叠逻辑」拆开处理，各自控制。
为什么 backdrop-filter 在 .navbar 上常失效
Bootstrap 默认的 .navbar（尤其是 .navbar-light 或 .navbar-dark）自带 background-color，会完全盖住背后的页面内容，backdrop-filter 就失去作用对象；同时，.navbar-collapse 展开时若继承了父级透明背景，又没设自身背景，在小屏下就会“透底”成一片空白或不可读。
-
background-color必须显式设为transparent或rgba(…, 0)，不能依赖默认值 -
.navbar-brand和.nav-link等子元素如果带白色背景（比如某些主题插件加的），也会局部遮挡模糊效果 -
backdrop-filter不受媒体查询影响，但.navbar-collapse的显示/隐藏状态会影响视觉连续性——它展开时需单独配背景色 - Safari 必须写
-webkit-backdrop-filter，否则直接不渲染
如何让 .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在高分屏上易导致文字边缘发虚
响应式切换按钮（toggler）为何点不开菜单
这不是模糊效果的问题，但常和它一起出现——因为开发者为了“统一风格”改了 data-toggle 或引入了 MDBootstrap 等第三方库，结果破坏了原生折叠逻辑。
- 确保使用标准 Bootstrap 5 的属性：
data-bs-toggle="collapse"和data-bs-target="#navbarContent"（注意bs前缀，不是mdb或旧版data-toggle） -
#navbarContent对应的<div class="collapse navbar-collapse"> 必须存在，且不能被 <code>display: none硬覆盖 - 如果用了自定义 JS 控制折叠，要确认它没禁用
bootstrap.bundle.min.js自带的Collapse实例 - 检查浏览器控制台是否有
Uncaught TypeError: Cannot read properties of null—— 多半是data-bs-target指向的 ID 不存在或拼错
最易被忽略的点：模糊效果只在元素背后有「可渲染内容」时才可见。如果导航栏是 .fixed-top，但页面顶部留白或首屏无滚动内容，backdrop-filter 就像对着空气模糊——调试时先滚一屏，再看是否生效。
