最简路径失效因Bootstrap 5默认叠加background-image、border-bottom及.theme类；需同时清除background-image: none !important、设background-color: rgba() !important、移除border-bottom。
直接给 .navbar 设置 background-color: rgba(255, 255, 255, 0.1) 是最简路径，但几乎一定会失效——因为 Bootstrap 5 默认叠加了 background-image: linear-gradient()、border-bottom 和预设主题类（如 .navbar-light），三者共同盖掉你的透明声明。
为什么 background-color: rgba() 没反应
Bootstrap 5 的 .navbar 根元素默认不写 background-color，但 .navbar-light 类会注入 background-color: #fff；更隐蔽的是，它还自带一层浅色渐变图层：background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0))。这个图层会叠在你设的 rgba() 上，导致看起来发灰、半透不透。
- 必须同时清除：
background-image: none !important; - 显式覆盖背景色：
background-color: rgba(255, 255, 255, 0.05) !important; - 删掉干扰边框：
border-bottom: none !important; - 别用
background: rgba(...)简写——它会意外清空background-position或其他隐含值
如何安全覆盖 .dropdown-menu 的透明度
.dropdown-menu 是独立 DOM 节点，完全不继承 .navbar 的背景设置。哪怕导航栏已透明，下拉菜单仍默认白底黑字，尤其在移动端展开时，页面内容会从菜单底下“透上来”，造成视觉混乱。
- 必须用组合选择器精准定位：
.navbar .dropdown-menu - 覆盖全部关键属性：
background-color: rgba(255, 255, 255, 0.95) !important;、border: none !important;、box-shadow: none !important; - 文字颜色需单独重设，不能依赖继承；深色背景上用
color: rgba(255, 255, 255, 0.9) !important; - 避免只写
background-color: transparent——它可能被 Bootstrap 高权重规则覆盖，rgba()+!important更稳
滚动后变实色时 transition 失效的根源
很多人写了 transition: background-color 0.3s 却发现颜色是“啪”一下跳过去，根本没过渡。问题不在 JS，而在 CSS 声明本身。
立即学习“前端免费学习笔记（深入）”；
- 起始状态不能用
transparent—— 浏览器无法对transparent和rgba()插值，必须统一用rgba(255, 255, 255, 0) -
transition必须写在默认状态（即未滚动时）的规则里，而不是只写在.scrolled类中 - 别写
transition: all 0.3s—— 它会强行动画height、opacity等无关属性，拖慢渲染 - 滚动监听要用
getBoundingClientRect().top 判断，而非固定像素阈值（如 <code>window.scrollY > 100），否则在有 banner 或 sticky 布局的页面里极易错判
真正麻烦的不是加透明，而是让所有子元素（下拉菜单、折叠容器、图标、文字）在不同滚动状态和主题下保持一致的视觉层级——这需要逐个检查 computed styles，而不是靠一个 !important 解决所有问题。
