background-color: transparent 对固定导航栏无效，是因为 Bootstrap 的 .navbar-light/.navbar-dark 类强制设定了背景色且权重更高，且 .navbar-collapse、渐变背景等独立样式会覆盖透明声明。
直接设 background-color: transparent 不生效，是因为 bootstrap 的 .navbar 在固定定位（.fixed-top 或 .sticky-top）后，其子容器（如 .navbar-collapse、.navbar-nav）仍自带背景色，且 .navbar-light / .navbar-dark 类会强制覆盖透明声明。
为什么 background-color: transparent 对固定导航栏无效
Bootstrap 5 的 .fixed-top 导航栏默认继承 .navbar-light 或 .navbar-dark，而这两个类内部绑定了 background-color（例如 #fff 或 #343a40），权重远高于你写的单层 .navbar { background-color: transparent }。浏览器开发者工具里看到的“已划掉”样式，基本都来自这里。
常见漏点：
-
.navbar-collapse是独立 DOM 节点，不继承.navbar的背景，移动端展开时若没加bg-white就会透出页面内容 -
.navbar-brand和.nav-link默认带 hover 背景，也会干扰整体透明感 -
background-image: linear-gradient(...)（Bootstrap 5 默认启用）会盖在background-color上方，导致 rgba() 失效
用 rgba() + !important 强制覆盖背景与边框
最稳写法是绕过语义类，用高优先级规则一次性清空干扰项：
.navbar.fixed-top {
background-color: rgba(255, 255, 255, 0.05) !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
.navbar.fixed-top .navbar-brand,
.navbar.fixed-top .nav-link {
color: rgba(255, 255, 255, 0.95) !important;
}
.navbar.fixed-top .navbar-collapse {
background-color: rgba(255, 255, 255, 0.05) !important;
}
注意：
- 别用
transparent—— 它和rgba()在 CSS transition 中行为不一致，滚动切换时容易卡顿或跳变 - 必须显式写
background-image: none，否则 Bootstrap 5 的渐变图层仍在 -
.navbar-collapse的背景要单独设，否则移动端下拉菜单展开后仍是透明的
滚动时动态切换透明度需监听 getBoundingClientRect().top
用 window.scrollY 判断滚动距离容易误触发（比如首屏有 banner），更可靠的是检测导航栏是否已贴顶：
const navbar = document.querySelector('.navbar.fixed-top');
const handleScroll = () => {
if (navbar.getBoundingClientRect().top <= 0) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
};
window.addEventListener('scroll', handleScroll);
对应 CSS：
.navbar.fixed-top {
transition: background-color 0.3s ease;
}
.navbar.fixed-top.scrolled {
background-color: rgba(255, 255, 255, 0.9) !important;
}
关键点：
- transition 必须写在未滚动的默认状态上，不能只写在
.scrolled里 - 不要在 scroll 回调里直接操作
style.backgroundColor，用 classList 切换更稳定 - 如果用了
backdrop-filter，记得同时加-webkit-backdrop-filter，否则 Safari 不生效
移动端下拉菜单背景必须显式声明
这是最容易被忽略的一环：即使 .navbar 已透明，.navbar-collapse 在小屏展开时默认无背景色，结果就是菜单项浮在页面内容上，文字看不清、点击区域错位。
解决方法只有两个字：**加类**。
- 静态方案：给
.navbar-collapse直接加bg-white（浅色主题）或bg-dark（深色主题） - 动态方案：JS 检测到
.scrolled后，同步给.navbar-collapse加bg-white，移除时再删掉 - 别依赖
.navbar-light自动配色 —— 它不控制背景，只改文字色
最后提醒一句：所有透明度调整都绕不开 .navbar-collapse 这个独立容器。它不继承、不联动、不自动适配，必须手动喂背景色，否则无论你怎么调 .navbar，折叠菜单永远是“半空中”的。
