直接加 background-color 无效，因 bootstrap 4 的 .navbar 本身常无背景色，真正显白的是 .navbar-nav > li > a、.navbar-collapse 等子元素，需逐层覆盖并清除 background-image、border、box-shadow，且必须使用 !important 确保高优先级。
直接加 background-color 为什么没反应
因为 Bootstrap 4 的 .navbar 本身常无背景色，真正“显白”的是子元素：.navbar-nav > li > a、.navbar-collapse、甚至 .container 都自带白色或浅灰背景。只改顶层 .navbar 就像给玻璃窗刷漆——底下还盖着好几层白纸。
用浏览器开发者工具逐层点选，重点看这些节点是否带 background-color 或 background-image（比如 linear-gradient），它们会盖掉你设的透明/半透值。
-
.navbar上可能有background-image: linear-gradient()，必须显式写background-image: none !important -
.navbar-collapse在移动端展开时默认白底，不覆盖它，下拉菜单就是刺眼的白块 -
.navbar-brand有时自带 padding 和 background，也得单独清
!important 不是偷懒，是必要手段
Bootstrap 4 的 CSS 规则优先级高，尤其 .bg-light、.navbar-light 这类类名自带内联权重。不加 !important，你的自定义样式大概率被忽略。
推荐写法（放在自定义 CSS 文件末尾，确保加载顺序在 Bootstrap 之后）：
.navbar {
background-color: rgba(255, 255, 255, 0.85) !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
.navbar .navbar-nav > li > a,
.navbar .navbar-brand {
color: #212529 !important;
}
.navbar .navbar-nav > li > a:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
.navbar .navbar-collapse {
background-color: rgba(255, 255, 255, 0.85) !important;
}
- 用
rgba()而非opacity：后者会让文字和图标一起变淡 - 别漏掉
.navbar-collapse——这是移动端折叠菜单的容器，不设它，展开后就是纯白背景 - 如果用了
.container包裹导航内容，它也可能带 padding 或 background，需一并检查
滚动时背景变色，JS 监听不能少
CSS 无法读取滚动位置，window.scrollY 必须靠 JS 判断。最简方案是监听 scroll 事件，动态加 .scrolled 类：
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
CSS 中定义：
.navbar.scrolled {
background-color: #fff !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
transition: background-color 0.3s, box-shadow 0.3s;
}
- 过渡动画要写在原始
.navbar上，不是.scrolled里，否则首次加载无渐变 - 移动端 iOS Safari 可能触发重复 scroll 事件，简单项目可暂不节流；若卡顿，用
requestAnimationFrame包一层 - 注意
.scrolled对.navbar-collapse的影响：加个.navbar.scrolled .navbar-collapse确保折叠态也同步变色
深色背景下 .navbar-toggler 边框看不见？不是 bug 是设计假设
Bootstrap 默认给 .navbar-toggler 设了 border-color: rgba(0, 0, 0, 0.1)，在 #0d0f12 这类极深背景上确实隐形。这不是漏写，是它假设你用的是标准 .bg-dark（#343a40）。
修复只需两步：
- 重设边框：
.navbar-toggler { border-color: rgba(255, 255, 255, 0.2) !important; } - 同步调亮图标：
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h16M4 15h16M4 23h16'/%3e%3c/svg%3e"); }
SVG 的 stroke 值必须手动编码，不能直接写颜色名；fill 不生效，得用 stroke。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
