直接设 background-color 无效是因为 bootstrap 5 组件默认含 background-image: linear-gradient()，需显式设 background-image: none !important 并覆盖 hover/active/disabled 状态，同时移除 bg-gradient 类。
为什么直接设 background-color 无效
Bootstrap 5 的 .navbar、.btn 等组件默认可能带 background-image: linear-gradient()（比如 .navbar-light 会注入浅色渐变图层），它和 background-color 是叠加关系，不是互斥。只写 background-color: #fff 不会清除渐变图层，结果是“白底 + 浅灰渐变”，看起来发灰、半透不透。
必须显式清空 background-image
关键动作是把渐变图层干掉，否则它永远盖在你设的颜色上面。所有涉及默认渐变的组件都得加这条：
-
background-image: none !important—— 强制移除渐变图层，!important是硬性前提，否则被 Bootstrap 高权重规则压住 - 再设
background-color: #fff !important或background-color: rgba(255, 255, 255, 0.95) !important，确保颜色生效且可控 - 如果用了
.navbar，顺手加border-bottom: none !important，它默认有 1px 边框，也会干扰“纯色”观感
按钮类要额外处理 hover / active 状态
.btn-primary 这类默认样式不仅在常态下有渐变，:hover 和 :active 也各自带 background-image。只清常态的渐变，悬停时会突然“弹出”原生渐变，体验割裂。
- 必须为每个伪类单独写：
.btn-primary:hover { background-image: none !important; } -
.btn-primary:active同理，iOS Safari 有时会跳过:active，显式声明更稳 - 禁用态
:disabled也要覆盖，否则可能退成半透明灰底，文字难读
检查是否被 bg-gradient 类干扰
如果你在元素上同时写了 class="navbar bg-gradient" 或 class="btn bg-gradient-to-r"，这些类会主动注入 background-image，和你的清除逻辑冲突。
- 删掉所有
bg-gradient*相关 class，它们不是“开关”，而是“强制注入器” - Bootstrap 5 的
bg-gradient类必须搭配bg-primary等才生效，但一旦生效，就很难被低优先级规则覆盖 - 用浏览器开发者工具的 Computed 面板确认
background-image是否真为none，不是靠肉眼猜
:hover 一触发，旧渐变立刻回来——这问题在导航栏悬停下拉菜单、按钮点击反馈时特别明显。
