当父元素具有不同的不透明度时，如何使子元素的不透明度为 100%？

Question

我正在为 freecodecamp 编码的致敬页面有一个导航栏，我只希望导航栏的背景为透明黑色，文本为纯黑色，但这似乎很难做到.

这是代码笔：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>

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

Answer 1

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

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

当父元素具有不同的不透明度时，如何使子元素的不透明度为 100%？

how do i make the opacity of a child element 100% while the parent element has a different opacity?

css

parent-child

opacity