background-color: transparent 无效是因为 Bootstrap 导航条存在多层背景叠加，需逐层清除 background-image、子元素背景，并用 rgba() 配合 !important 设置透明度，同时处理文字颜色、滚动监听及毛玻璃效果。
直接设 background-color: transparent 基本无效，因为 Bootstrap 导航条是多层背景叠加结构，必须逐层清除干扰项并用 rgba() 控制透明度。
为什么 background-color: transparent 没反应
Bootstrap（尤其是 v4/v5）的 .navbar 默认带 background-image: linear-gradient()，它会盖在 background-color 上方；同时子元素如 .navbar-collapse、.navbar-nav、.nav-link 都自带白色背景，把透明“挡”住了。浏览器开发者工具里点开 .navbar 的 Computed 样式，大概率看到 background-image 未被清空，或 background-color 被子容器覆盖。
- 别只改
.navbar，要一并覆盖.navbar-light/.navbar-dark或响应式类（如.navbar-expand-lg） - 必须显式写
background-image: none !important，否则渐变图层还在 -
transparent是关键字，不能参与transition插值，后续做滚动变色会失效 - 文字颜色得手动重设，否则透明后文字可能看不见（比如
.navbar-light下默认黑色文字）
rgba() 写法和关键声明
用原色转 rgba() 是唯一可靠方式：比如原 #ffffff → rgba(255, 255, 255, 0.8)，最后一位 alpha 值控制透光度（0 = 完全透明，1 = 不透明）。注意这不是调整个体元素的不透明度，而是仅影响背景层。
- 必须加
!important，Bootstrap 5 的内置 CSS 权重很高，不加很可能被覆盖 - 禁用简写
background，它会意外重置background-image或background-position - 顺手清掉干扰项：
border: none !important、box-shadow: none !important - 移动端展开菜单（
.navbar-collapse）也要单独设background-color: rgba(255, 255, 255, 0.95)，否则点开后突然变白
滚动时从透明变实色，JS 怎么写才不卡
纯 CSS 无法监听滚动位置，必须靠 JS 切 class。但直接在 scroll 回调里改样式会高频触发、卡顿、跳帧，且 transition 很可能失效。
- 用
requestAnimationFrame节流，确保每帧最多执行一次判断 - 阈值别设
window.scrollY > 0，建议用> 50防手滑误触发 -
transition: background-color 0.3s ease必须写在默认状态（即没加.scrolled时的规则里），不能只写在.scrolled类中 - 起始状态不能用
transparent，要用rgba(255, 255, 255, 0)，否则过渡无法计算 - 更稳的触发逻辑是监听导航条自身位置：
navbar.getBoundingClientRect().top ≤ 0，避免顶部 banner 干扰
想加毛玻璃效果，backdrop-filter 怎么配
backdrop-filter: blur(10px) 不是加了就生效，它只对「元素背后的内容」模糊，如果导航条自己不透明，后面内容就被完全遮住。
- 必须设
background-color: rgba(255, 255, 255, 0.1)（alpha 值太低文字发虚，太高失模糊感） - 一定要加
-webkit-backdrop-filter: blur(10px)，Safari 不认无前缀版本 - 删掉所有
bg-*类（如bg-light），它们会强行覆盖透明背景 - 检查是否误加了
overflow: hidden，它会裁掉模糊渲染区域（尤其在下拉菜单展开时） - 别用
filter: blur()替代——它会把文字和图标一起糊掉
最常被忽略的是子元素背景和 background-image 的残留。哪怕你把 .navbar 设成 rgba(0,0,0,0)，只要 .navbar-collapse 还是白色，用户看到的仍是实色。动手前先打开开发者工具，逐层检查真实生效的背景来源，比盲目套代码快得多。
