Bootstrap 导航栏固定后背景色动态透明度-Bootstrap教程-PHP中文网

background-color: transparent 对固定导航栏无效，是因为 Bootstrap 的 .navbar-light/.navbar-dark 类强制设定了背景色且权重更高，且 .navbar-collapse、渐变背景等独立样式会覆盖透明声明。

直接设 background-color: transparent 不生效，是因为 bootstrap 的 .navbar 在固定定位（.fixed-top 或 .sticky-top）后，其子容器（如 .navbar-collapse、.navbar-nav）仍自带背景色，且 .navbar-light / .navbar-dark 类会强制覆盖透明声明。

为什么 `background-color: transparent` 对固定导航栏无效

Bootstrap 5 的 .fixed-top 导航栏默认继承 .navbar-light 或 .navbar-dark，而这两个类内部绑定了 background-color（例如 #fff 或 #343a40），权重远高于你写的单层 .navbar { background-color: transparent }。浏览器开发者工具里看到的“已划掉”样式，基本都来自这里。

常见漏点：

.navbar-collapse 是独立 DOM 节点，不继承 .navbar 的背景，移动端展开时若没加 bg-white 就会透出页面内容
.navbar-brand 和 .nav-link 默认带 hover 背景，也会干扰整体透明感
background-image: linear-gradient(...)（Bootstrap 5 默认启用）会盖在 background-color 上方，导致 rgba() 失效

用 `rgba()` + `!important` 强制覆盖背景与边框

最稳写法是绕过语义类，用高优先级规则一次性清空干扰项：

.navbar.fixed-top {
  background-color: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
.navbar.fixed-top .navbar-brand,
.navbar.fixed-top .nav-link {
  color: rgba(255, 255, 255, 0.95) !important;
}
.navbar.fixed-top .navbar-collapse {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

注意：

别用 transparent —— 它和 rgba() 在 CSS transition 中行为不一致，滚动切换时容易卡顿或跳变
必须显式写 background-image: none，否则 Bootstrap 5 的渐变图层仍在
.navbar-collapse 的背景要单独设，否则移动端下拉菜单展开后仍是透明的

滚动时动态切换透明度需监听 `getBoundingClientRect().top`

用 window.scrollY 判断滚动距离容易误触发（比如首屏有 banner），更可靠的是检测导航栏是否已贴顶：

const navbar = document.querySelector('.navbar.fixed-top');
const handleScroll = () => {
  if (navbar.getBoundingClientRect().top 
<p>对应 CSS：</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
														src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
													<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<pre class="brush:php;toolbar:false;">.navbar.fixed-top {
  transition: background-color 0.3s ease;
}
.navbar.fixed-top.scrolled {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

关键点：