navbar滚动时背景模糊失效需同时清空background-color、启用透传并叠加backdrop-filter；safari需加-webkit前缀；firefox不支持需@supports降级；背景图应设在body上避免高度变化导致跳变。
Navbar 滚动时背景模糊失效？检查 backdrop-filter 和透明度叠加顺序
直接改 background-image 或只调 opacity 不会生效——因为 Bootstrap 的 .navbar 默认用 background-color 覆盖了背景图，且 backdrop-filter 在父容器有背景色时会被遮挡。必须同时清空背景色、启用透传、再叠加滤镜。
- 先移除默认背景：
.navbar { background-color: transparent !important; } - 确保父容器（如
）有真实背景图或颜色，否则模糊无对象可“模糊” -
backdrop-filter: blur(10px)必须配合-webkit-backdrop-filter才能在 Safari 生效 - 别用
rgba()设透明背景色——它会污染 backdrop 效果；用transparent+opacity控制整体可见度更安全
滚动中动态切换 navbar 样式：监听 scroll 事件 + class 切换比内联 style 更可靠
用 JavaScript 直接改 style.backdropFilter 容易被 Bootstrap 的重绘覆盖，也难维护。推荐在 window.onscroll 中切换预设 class，由 CSS 控制状态。
- 定义两个 class：
.navbar-scrolled（带模糊+半透明）和默认无修饰的初始态 - 监听
scroll时判断window.scrollY > 50再添加/移除 class，避免高频触发 - 不要用
document.querySelector('.navbar').style.opacity = '0.9'—— 这种写法会和 Bootstrap 的内联样式冲突 - 示例 JS：
window.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.classList.add('navbar-scrolled'); } else { navbar.classList.remove('navbar-scrolled'); } });
Firefox 不支持 backdrop-filter？加降级方案别硬扛
Firefox 目前仍不支持 backdrop-filter（截至 v128），纯靠它会导致视觉断裂。不能只写一行滤镜声明。
- 用
@supports (backdrop-filter: blur(1px))包裹模糊相关样式，避免污染其他浏览器 - 为 Firefox 提供替代方案：比如滚动后加一层半透明白色遮罩（
::before伪元素 +rgba(255,255,255,0.1)），保持视觉层次 - 慎用第三方 polyfill（如
backdrop-filter-polyfill）——性能差、兼容性不稳定，实际项目中不如优雅降级 - 注意：加伪元素遮罩时，务必设
z-index: -1并确认position: absolute，否则会挡住导航链接
背景图被裁切或拉伸？Navbar 高度变化影响 background-size 渲染
滚动时 navbar 从 height: 56px 缩为 48px（常见于 sticky 场景），若背景图用 background-size: cover，高度突变会导致图像跳变或局部裁切。
- 统一用
background-size: 100% 100%或contain，避免cover的自适应裁剪逻辑 - 如果必须用
cover，把背景图设在上，navbar 仅负责模糊层，这样背景不动，模糊层随滚动变化 - 检查
background-attachment: fixed是否启用——它在移动端常失效，且与backdrop-filter组合时可能触发渲染异常 - 调试技巧：临时加
border: 1px solid red到 navbar，确认其实际尺寸是否被 padding/margin 拉伸
backdrop-filter 就完事，却没意识到它需要透过自身透明区域看到下层元素——那层元素得真实存在、没被遮挡、且足够丰富。
