.navbar背景色无效主因是background-image渐变层覆盖、子容器白色背景遮挡及CSS加载顺序错误；需用!important清除图层并设色，同步修改折叠菜单和图标颜色。
直接改 .navbar 的 background-color 通常没用——因为 bootstrap 5 默认给它加了 background-image: linear-gradient()，还可能被子元素（比如 .navbar-collapse 或 .dropdown-menu）的白色背景盖住。真要生效，得先清图层、再设色、再压子容器。
为什么加了 background-color 还是白的
常见失效不是你写错了，而是被这几层“盖”住了：
-
.navbar自带浅色渐变图层，background-image比background-color优先渲染 -
.navbar-collapse.show容器默认透明，但它的子元素.navbar-nav或.dropdown-menu是纯白底 - 用了
bg-light类却没配navbar-light，文字色和背景色不匹配，看起来像“没变” - 自定义 CSS 文件写在 Bootstrap 的
<link rel="stylesheet">前面，直接被覆盖
改 .navbar 本体背景的实操写法
必须同时清除图层、设色、加权重：
.navbar {
background-image: none !important;
background-color: #1a1d22 !important;
border: none;
}
注意三点：
- 不能只写
background: rgba(26, 29, 34, 0.95)—— 简写会漏掉background-image: none - 深色背景下
.navbar-toggler边框默认是rgba(255,255,255,.1)，几乎看不见，得单独补：.navbar-toggler { border-color: rgba(255,255,255,.3); } - 如果用了 Sass 编译，改
$navbar-bg变量比写 CSS 更稳，但必须在@import "bootstrap/scss/navbar"前赋值
折叠后菜单背景怎么同步变色
这是最容易漏的一环：导航栏本体变深了，但点开汉堡菜单还是白底黑字，视觉断裂。关键看你是哪种折叠模式：
- 用
data-bs-toggle="collapse"（推荐）：改.navbar-collapse.show的背景：.navbar-collapse.show { background-color: #1a1d22; } - 用
dropdown模式（老写法）：改.dropdown-menu：.dropdown-menu { background-color: #1a1d22 !important; } - Bootstrap 5.3+ 全局变量方式：
:root { --bs-navbar-dropdown-bg: #1a1d22; }—— 但只对.dropdown-menu生效，对collapse模式无效
深色模式下 navbar-toggler 图标不显示
图标由 .navbar-toggler-icon 的 SVG mask 渲染，不响应 color，也不继承父级背景。深色背景上图标发灰或隐形，是因为默认 stroke 是浅灰。必须重写 mask 路径颜色：
.navbar-toggler-icon {
background-image: none;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-color: currentColor;
}
重点：
- 把 URL 中的
rgba%280,0,0,1%29换成rgba%28255,255,255,1%29（即白色 stroke） -
background-color: currentColor让图标随.navbar-dark的文字色自动适配 - 别忘了 hover/focus 状态也要同步加
.navbar-toggler:focus .navbar-toggler-icon规则
最常被忽略的其实是“折叠后菜单容器本身没背景”，你以为改了 .navbar 就万事大吉，结果一展开菜单，底下页面内容透上来，整个导航栏像浮在半空——那不是透明度问题，是 .navbar-collapse.show 或 .dropdown-menu 没设背景色。
