使用Bootstrap5时导航栏无法透明的问题解决求助

核心问题原因 #

全局*选择器设置的background-color会应用到所有元素（包括导航栏及其子元素），直接覆盖了Bootstrap导航栏的透明背景样式，导致侧边栏背景图无法透过导航栏显示。

三种可行解决方案 #

1. 提升导航栏背景样式优先级 #

给导航栏添加自定义样式，用更具体的选择器覆盖全局样式（尽量避免滥用!important，优先用选择器权重提升）：

/* 原全局样式 */
* {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

/* 针对导航栏的透明样式 */
.navbar {
  background-color: transparent;
  /* 如果还是被覆盖，可增加选择器权重，比如结合父元素 */
  /* header .navbar { background-color: transparent; } */
  /* 极端情况再用!important */
  /* background-color: transparent !important; */
}

同时在HTML中确保导航栏使用Bootstrap的navbar类：

<nav class="navbar navbar-expand-lg">
  <!-- 导航栏内容 -->
</nav>

2. 修改全局*选择器，排除导航栏元素 #

直接调整全局选择器，让它不作用于导航栏及其子元素：

*:not(.navbar):not(.navbar *) {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

这个方法不需要额外修改导航栏的样式，直接从根源避免全局样式影响导航栏。

3. 结合Bootstrap内置类增强样式 #

Bootstrap自带bg-transparent类，给导航栏添加这个类后，再用自定义CSS确保它的优先级高于全局样式：

.navbar.bg-transparent {
  background-color: transparent !important;
}

HTML结构：

<nav class="navbar navbar-expand-lg bg-transparent">
  <!-- 导航栏内容 -->
</nav>

效果验证 #

应用上述任意一种方案后，导航栏背景会变为透明，侧边栏的背景图就能正常显示在导航栏下方，实现教程中的目标效果。

内容的提问来源于stack exchange，提问作者Shuvo Saha