background-color: transparent 无效是因为 bootstrap 5 的 .navbar 存在多层背景叠加：默认渐变图层（background-image）、子容器独立背景色及高权重主题类；需用 !important 同时清除 background-color、background-image 等并单独处理折叠菜单背景。
直接给 .navbar 设 background-color: transparent 基本无效——Bootstrap 5 的背景控制是多层叠加的，必须同时清除渐变图层、覆盖子容器默认色、绕过主题类权重。
为什么 background-color: transparent 没反应
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))。这个图层盖在你设的 transparent 上，导致看起来发灰、半透不透。
-
background-image必须显式设为none !important，否则它永远压在最上层 -
.navbar-collapse和.navbar-nav是独立容器，自带白色背景，不继承父级透明度 -
.navbar-light或.navbar-dark类的 CSS 权重远高于你单写的.navbar规则
真正生效的 CSS 覆盖写法
用高优先级规则一次性清掉干扰项，别依赖继承或简写：
.navbar {
background-color: rgba(255, 255, 255, 0) !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
.navbar-collapse,
.navbar-nav {
background-color: transparent !important;
}
- 起始状态必须用
rgba(255, 255, 255, 0)，不能用transparent——否则后续 transition 无法插值 -
!important不是可选，是必须：Bootstrap 5 内置规则大量使用!important和变量，不加就大概率被盖掉 - 别用
background:简写，它会意外清空background-position或其他隐含值
移动端折叠菜单背景也要单独处理
折叠后弹出的菜单区域不是 .navbar 的子元素渲染，而是独立的 .dropdown-menu 或 .navbar-collapse.show，两者背景互不影响。
- 如果用
data-bs-toggle="collapse"（推荐），改.navbar-collapse.show { background-color: transparent !important; } - 如果用
data-bs-toggle="dropdown"，改.dropdown-menu { background-color: rgba(255, 255, 255, 0.95) !important; }（别用transparent，易被覆盖） - 深色模式下需额外加
@media (prefers-color-scheme: dark)块重设rgba()值
滚动后变色时 transition 失效的根源
写了 transition: background-color 0.3s 却“啪”一下跳变，问题不在 JS，而在 CSS 声明本身。
- 起始状态必须是
rgba(255, 255, 255, 0)，结束状态是rgba(255, 255, 255, 0.95)——transparent和rgba()类型不同，无法插值 -
transition必须写在默认状态（如.navbar）里，不是只写在.navbar-scrolled中 - JS 监听滚动时，用
getBoundingClientRect().top ≤ 0判断是否贴顶，比硬写window.scrollY > 100更可靠，尤其有 banner 时
最常漏掉的是 .navbar-collapse 在移动端展开后的背景——它不会自动继承 .navbar 的类名或背景色，必须手动同步加类或设样式。
