如何在父元素具有不同的不透明度的同时将子元素的不透明度设为100％？

Question

我有一个导航栏，用于编写freecodecamp的致敬页面，我只想让导航栏的背景为透明黑色，文字为纯黑色，但似乎这很难做到

这是codepen：https://codepen.io/bkhible/pen/Bzpyyb

.navbar {
  background-color: rgba(0,0,0,0.3);
  border: none;
  color: #000;
}

h3 {
  color: #000;
}

.navbar-text {
  font-family: 'Signika', sans-serif;
  font-size: 68px;
  letter-spacing: 10px;
  color: #000;
}

和

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <h3 class="navbar-text">RADIOHEAD</h3>
  </div>
</nav>

我发现这个q＆amp; a：Opacity bleeding into child divs ...但是这个解决方案似乎不起作用，除非我完全遗漏了什么？我假设修复非常非常简单。

Answer 1

不是不透明。你的颜色很少：

// navbar.less:548
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}