移动端折叠菜单背景为白色是因为 .dropdown-menu 默认 background-color: #fff，需用 rgba() 显式重写并加 !important；滚动变色需 JS 监听并添加 .scrolled 类联动；文字色、hover 背景及 backdrop-filter 也需单独适配。
移动端折叠菜单背景为什么还是白的
因为 .dropdown-menu（或 .navbar-collapse 展开后生成的容器）默认是 background-color: #fff，和 .navbar 的透明设置完全无关。你改了导航栏本身，但折叠态下拉菜单是独立定位的绝对元素，它自带白色背景，会盖住底下内容，看起来像“发虚”或“半透半不透”。
- 检查浏览器开发者工具里
.dropdown-menu的 Computed background-color，大概率是rgb(255, 255, 255)，不是继承来的 - Bootstrap 5 在小屏下不会自动给
.dropdown-menu加透明，也不会响应父级的bg-opacity-*类 - 如果用了
.navbar-dark，.dropdown-menu仍默认白底——这个类只影响文字色，不控制下拉菜单背景
直接覆盖 .dropdown-menu 的 background-color
必须显式重写它的背景色，用 rgba() 控制透明度，不能靠 bg-opacity-50 这类工具类——它们对 .dropdown-menu 无效，因为其底层背景是 HEX 值而非 RGB/RGBA。
- 写法示例：
.navbar .dropdown-menu { background-color: rgba(255, 255, 255, 0.92) !important; } - 务必加
!important：Bootstrap 5 的.dropdown-menu样式权重很高，普通选择器压不住 - 顺手清掉干扰项：
border: none !important;、box-shadow: none !important;，否则边框和阴影会破坏透明感 - 别用
transparent：iOS Safari 对transparent → rgba()的 transition 不支持，滚动切换时会突变；起始值也用rgba(255,255,255,0.05)更稳妥
滚动时下拉菜单背景要不要同步变色
要，但 CSS 无法自动联动。因为 .dropdown-menu 是脱离文档流的 position: absolute 元素，它不随页面滚动而“移动”，所以 window.scrollY 对它无直接影响。
- 正确做法：JS 监听滚动后，给
.navbar添加.scrolled类，再用更具体的选择器联动：.navbar.scrolled .dropdown-menu - 避免写成
.scrolled .dropdown-menu：可能误中页面其他下拉菜单（比如表单里的.dropdown） - 过渡动画只加在
background-color上：transition: background-color 0.3s ease；别用all，否则box-shadow或transform动画容易卡顿 - 移动端点击展开瞬间可能闪烁：监听
show.bs.dropdown事件，在菜单显示后立即强制刷新一次 class 状态
折叠态菜单文字颜色和 hover 效果要单独调
背景变透明后，.dropdown-item 的默认文字色（如 #212529）在浅色背景下可能看不清，hover 背景色也可能失效。
- 文字色建议统一设为深灰或浅灰：
.navbar .dropdown-item { color: rgba(0,0,0,0.8) !important; } - hover 背景别用纯色：
.navbar .dropdown-item:hover { background-color: rgba(0,0,0,0.05) !important; } - 如果导航栏用了毛玻璃效果（
backdrop-filter: blur(10px)），记得给.dropdown-menu也加上，否则菜单区域会显得“平” - 注意 iOS Safari 旧版本需加
-webkit-backdrop-filter才生效
真正容易被忽略的是：移动端折叠菜单的渲染上下文和桌面端不同——它往往由 .navbar-collapse 触发，而这个容器在小屏下可能被设为 overflow-y: auto，导致滚动监听失效。验证方式很简单：打开控制台，执行 document.querySelector('.navbar-collapse').scrollTop，滚动菜单看看是否变化。如果不是，就得把 scroll 监听目标从 window 换成这个容器本身。
