导航栏设为 transparent 后仍不透明，主因是 Bootstrap 预设类（如 .navbar-light）强制设置了 background-color；需用更高优先级 CSS 覆盖或移除冲突类。
导航栏背景设为 transparent 后还是不透明？
常见现象是写了 background: transparent，但导航栏看起来依然有底色——大概率是父容器或 Bootstrap 自带的 background-color 覆盖了，或者用了 .navbar-light / .navbar-dark 这类预设类，它们内部绑定了强制背景色。
Bootstrap 5 默认会给 .navbar 加上 background-color: #fff（light 主题）或 #343a40（dark 主题），直接覆盖你的 transparent 声明。必须用更高优先级的方式覆盖它：
- 加
!important（临时调试可用，但不推荐长期使用） - 用更具体的 CSS 选择器，比如
.navbar.my-transparent-nav { background: transparent !important; } - 移除冲突的预设类，例如删掉
.navbar-light，只保留.navbar和自定义类
透明导航栏下文字/图标看不清？检查 color 和 border
背景变透明后，文字颜色不会自动适配。Bootstrap 的 .navbar-light 默认设 color: #333，在浅色背景上没问题；但透明时，如果页面滚动后下方是白色区域，黑色文字就糊成一片。
必须同步调整文本、图标、边框的颜色：
立即学习“前端免费学习笔记（深入）”；
.navbar.my-transparent-nav .navbar-brand, .navbar-nav .nav-link { color: #fff; }- 如果需要下边框做分隔，别用默认的
border-bottom（它可能被继承为深色），显式设border-bottom: 1px solid rgba(255,255,255,0.1); - 慎用
.navbar-dark：它只改文字色，不改背景，且自带background-color，反而容易干扰
滚动时想动态切换透明/实色？用 JavaScript 监听 scroll 即可
纯 CSS 做不了“滚动后变实色”，得靠 JS 判断滚动位置并切类名。关键是避免频繁触发重排，别在 scroll 里直接改样式，用 classList.toggle 切换预设类最稳妥。
示例逻辑：
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
navbar.classList.toggle('scrolled', window.scrollY > 10);
});
然后在 CSS 中写：
.navbar { background: transparent; }
.navbar.scrolled { background: #fff !important; }
.navbar.scrolled .nav-link { color: #333; }
- 阈值别设为
0，否则页面刚加载就触发，影响首屏观感 - 记得给
.scrolled状态下的文字、图标、边框都重新定义，否则颜色会突兀 - 移动端要额外测试
scroll兼容性，iOS Safari 有时需要{ passive: true }
透明导航栏在移动端塌陷菜单（.navbar-collapse）里失效？
折叠菜单弹出时，它的容器 .navbar-collapse 是绝对定位、脱离文档流的，且 Bootstrap 默认给它加了 background-color: #fff（light）或 #343a40（dark），和顶部导航栏无关。所以即使你把 .navbar 设为透明，下拉菜单还是白底黑字。
要统一风格，必须单独处理折叠菜单：
- 加 CSS：
.navbar-collapse { background: transparent !important; } - 如果菜单项文字在透明背景下看不清，一并覆盖：
.navbar-collapse .nav-link { color: #fff; } - 注意：折叠菜单的
box-shadow可能残留，需手动清掉：box-shadow: none;
真正麻烦的是混合场景：导航栏透明，但折叠菜单需要半透明白底（比如 rgba(255,255,255,0.9)）来保证可读性——这时候就得放弃全局 transparent，改用可控的低 alpha 值，不然纯透明在任意背景上都不可靠。
