时间戳

首页 > 解决方案 > Bootstrap 4 - “透明”固定导航栏但没有字母透明

css - 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 个不同的背景。
  3. 我可以使用渐变在 1 个 div 中创建正确的背景。问题是“继承”不适用于渐变。

我仍然可以选择使用 js 在滚动时更改导航栏颜色，但这并不完美。在这种情况下，导航栏会在一瞬间完全改变颜色，在“透明”导航栏下不会有滚动颜色的效果。很难解释 ：（

我错过了什么吗？

标签： csstwitter-bootstrapnavbartransparent

解决方案

推荐阅读