带有引导程序的透明导航栏无法按预期工作答案

【问题标题】：Transparent Nav Bar with bootstrap not working as desired带有引导程序的透明导航栏无法按预期工作
【发布时间】：2020-04-06 02:00:59
【问题描述】：

我正在尝试使导航栏透明，但正如您从图像中看到的那样，整个导航栏的颜色并不相同。内容比周围区域稍暗。似乎它应用了两次透明度以使一部分稍微变暗。我已经包含了我正在使用的引导覆盖。

#bootstrap-overrides .bg-dark {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

【问题讨论】：

【解决方案1】：

您可能在 navbar div 和包含链接的 ul 附近都使用了 bg-dark 类。在这种情况下，只在你的navbar div 中使用它就可以了！

也许您可以发布您的 html 以供检查？

【讨论】：

【解决方案2】：

不使用 css，而是使用 bootstrap 添加下面的类：

<nav class="navbar bg-transparent nav-dark"></nav>

bg-transparent 会做出你想要的；不要忘记删除你的css

【讨论】：

这没有任何作用，因为导航栏默认是透明的
你确定吗？我已经完成了，并且成功完成了。
Codeply-er 我认为如果您将 !important 赋予样式，引导程序仍然可以正常工作，并且当 pzero1 添加 bg-dark 类背景时会变暗。
.navbar 没有背景颜色，除非你明确地给它一个，或者使用 bg-* 类之一。因此没有理由使用bg-transparent。见this或stackoverflow.com/a/49258102/171456