需显式重写 .navbar-collapse 在小屏下的 background-color 为 rgba(255,255,255,0.92) 并添加 backdrop-filter: blur(10px)、-webkit-backdrop-filter: blur(10px)，清除 border-radius 和 overflow: hidden，同时为 .dropdown-menu 单独设置透明背景、无边框阴影及悬停态，并用 JS 监听滚动平滑过渡背景色。
移动端 .navbar-collapse 展开后背景发白，怎么改透明度
不是 .dropdown-menu 的问题，而是 .navbar-collapse 这个容器本身在小屏展开时默认设了 background-color: white，直接盖掉模糊层。它和 .navbar 是独立 DOM 节点，不继承父级的 rgba() 或 transparent。
必须显式重写它的背景，且不能用 transparent——iOS Safari 下会透出底层内容导致文字不可读：
-
.navbar-collapse在@media (max-width: 991.98px)内需单独设background-color: rgba(255, 255, 255, 0.92)（别低于 0.85，否则文字发虚） - 避免用
bg-transparent类，它只设background-color: transparent，压不住 Bootstrap 自带的白色背景 - 如果用了深色主题，对应改成
rgba(0, 0, 0, 0.92)，并同步调高文字对比度
为什么加了 backdrop-filter 但展开菜单后模糊断层
因为 .navbar-collapse 展开时自带 overflow: hidden 和 border-radius，会裁剪模糊渲染区域；同时它没继承父级的 -webkit-backdrop-filter。
解决办法不是给整个 .navbar 加滤镜，而是分层补漏：
- 给
.navbar-collapse单独加backdrop-filter: blur(12px)和-webkit-backdrop-filter: blur(12px) - 清除默认圆角：
border-radius: 0，否则顶部边缘模糊不自然 - 移除干扰：
overflow: visible !important（hidden会截断模糊溢出） - 确保其父容器（比如
.navbar）没设overflow: hidden，否则模糊区域被整体裁掉
折叠菜单里的下拉项（.dropdown-menu）背景怎么同步透明
.dropdown-menu 是绝对定位、脱离文档流的独立节点，它不会自动继承 .navbar-collapse 的背景或滤镜，必须手动覆盖。
只改 background-color 不够，它自带 border 和 box-shadow，会破坏玻璃感：
- 用组合选择器精准作用：
.navbar-collapse .dropdown-menu，避免影响表单等其他下拉菜单 - 必须同时设：
background-color: rgba(255, 255, 255, 0.95) !important、border: none !important、box-shadow: none !important - 悬停态也要重写：
.dropdown-item:hover { background-color: rgba(0, 0, 0, 0.05) !important } - 文字颜色不能靠继承，加
.dropdown-menu .dropdown-item { color: #333 !important }
滚动时移动端菜单背景要不要变色？怎么平滑过渡
要，但 CSS 无法自动响应 window.scrollY —— 因为 .navbar-collapse 展开后位置固定，不随滚动位移变化。
必须 JS 主动监听并同步状态：
- 给
.navbar添加.scrolled类后，用.navbar.scrolled .navbar-collapse .dropdown-menu触发背景色变更 - 过渡只写
transition: background-color 0.3s ease，别加all，否则box-shadow或transform动画会冲突 - 起始值必须是
rgba(255, 255, 255, 0.92)，终点值比如rgba(255, 255, 255, 0.98)，别用transparent→rgba()，transition 不生效 - 节流用
requestAnimationFrame，不是setTimeout，避免滚动卡顿
最易忽略的是：blur 值在移动端高分屏上超过 12px 就会让文字边缘发虚，而小屏下文字本身更小，建议统一用 10px —— 它在 iPhone 15 Pro 和 Pixel 8 上都足够清晰又不失质感。
