直接改 background-color 为 rgba() 即可实现导航条背景透明，但需同时清除 background-image、覆盖子元素背景、用 !important 提权，并配合 JS 动态切换滚动状态下的 class。
直接改 background-color 为 rgba() 就行，但别只改导航条本身
Bootstrap 的 .navbar 默认背景是纯色（比如 #fff）或带 background-image 渐变，光写 .navbar { background-color: rgba(255, 255, 255, 0.7); } 常常没反应——因为子元素（如 .navbar-collapse、.navbar-nav）自带白色背景，把透明“盖”住了；更常见的是 Bootstrap 5 默认加了 background-image: linear-gradient(...)，它会叠在 background-color 上方，导致看起来发灰、半透不干净。
实操建议：
- 用浏览器开发者工具检查，定位真正生效的类：通常是
.navbar、.navbar-light或.navbar-expand-lg根级选择器 - 把原色转成
rgba()：比如#ffffff→rgba(255, 255, 255, 0.8)，最后一位是 alpha（0 = 完全透明，1 = 不透明） - 显式清除渐变图层：
background-image: none !important; - 顺手去掉干扰边框：
border-bottom: none !important; - 别用
background简写，它可能意外重置background-image或background-color
opacity 会让文字一起变淡，必须用 rgba() 控背景层
给 .navbar 直接设 opacity: 0.9 看似简单，但会导致文字、图标、下拉菜单全部变淡，交互区域也弱化，这不是背景透明，是整块降级。真正需要的是「背景层透明，内容保持不透明」——这只能靠 background-color 的 rgba() 实现。
rgba(255, 255, 255, 0.8) 是半透明白底，文字默认仍是 100% 不透明；而 opacity: 0.8 会让整个 DOM 树子节点都继承这个透明度。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误以为
bg-opacity-50类能直接生效——它只对 RGB/RGBA 背景色起作用，而bg-light底层是#f8f9fa（HEX），所以bg-light bg-opacity-50在大多数项目里根本没反应 - 在移动端折叠态下，
.navbar-collapse容器本身没背景，但.dropdown-menu默认白底，结果菜单浮在半空，底下页面内容透上来，看起来像发虚 - alpha 值低于 0.6 时，浅底上深色文字可能对比度不达标（WCAG AA 要求），尤其滚动后下方是白色区域时
滚动后变实色？scrollTop 判断不准，得用 getBoundingClientRect()
纯 CSS 无法监听滚动，必须靠 JS 动态切 class（比如 .scrolled）。但很多人用 window.scrollY > 50 这种固定阈值，结果在有顶部 banner 或 sticky 导航的页面里频繁误触发——用户还没看到导航栏，scrollY 就已超 100。
更稳的做法是监听导航栏自身位置：
- 用
document.querySelector('nav.navbar').getBoundingClientRect().top获取导航栏上边缘离视口顶部的距离 - 当该值 ≤ 0（即导航栏已贴顶），再添加
.scrolled类 -
transition必须写在默认状态里，且只写background-color和box-shadow，别用all，否则动画卡顿 - 记得同步处理
.dropdown-menu：用.navbar.scrolled .dropdown-menu这种具体选择器联动，避免匹配到非导航栏内的下拉菜单
透明导航栏下文字看不清？颜色和边框得手动配
背景变透明后，文字颜色不会自动适配。.navbar-light 默认设 color: #333，在纯白背景上没问题；但透明时，如果滚动后下方是白色区域，黑色文字就糊成一片。
必须同步调整：
- 文字与图标颜色：
.navbar-brand、.nav-link都要显式设color，比如color: #fff（配合深色背景）或color: #212529（配合浅色背景） - 边框别依赖默认：
border-bottom可能被继承为深色，应显式写border-bottom: 1px solid rgba(255, 255, 255, 0.1) - 慎用
.navbar-dark：它只改文字色，不改背景，且自带background-color，反而容易干扰透明效果 - 移动端折叠后，
.navbar-collapse容器需单独加背景：.navbar-collapse { background-color: rgba(255, 255, 255, 0.95); }，否则下拉菜单背景会透出底层内容
