微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Bootstrap 4-“透明”固定导航栏,但无字母透明

如何解决Bootstrap 4-“透明”固定导航栏,但无字母透明

我有一个具有2种差异颜色背景的网页,例如:

<body>
  <div class="bg1">aaa</div>
  <div class="bg2>bbb</div>
</body>
.bg1 {background: green; height: 100vh;}
.bg2 {background: red; height: 100vh;}

我想添加Bootstrap 4固定顶部导航栏。我希望此导航栏与它下面的div具有相同的颜色。导航栏看起来是“透明的”,但没有从div中看到文本“ aaa”或“ bbb”。

我尝试过:

  1. 导航栏背景:透明。问题是我在div中看到“ aaa”和“ bbb”。
  2. 导航栏背景:继承。问题是我只能继承1个父级背景,但是我想要2个diff背景。
  3. 我可以使用渐变在1格中创建合适的背景。问题在于“继承”不适用于渐变。

我仍然可以选择使用js更改滚动条上的导航栏颜色,但这并不完美。在这种情况下,导航栏将在一瞬间完全改变颜色,在“透明”导航栏下将不会滚动颜色。很难解释:(

我想念什么吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。