Css 不透明度属性

Question

我有一个问题。这是示例：

nav {
  width: 100%;
  background: #000;
  opacity: 0.8;
}

ul {
  background: green;
  opacity: 1;
}

<nav>
  <ul>
    <li>Link1</li>
    <li>Link2</li>
  </ul>
</nav>
<header>
  <h1>123</h1>
</header>

问题是，ul 也有 opacity。所有这些我的意思是 nav 标签没问题，它的不透明度为 0.8，但我的 ul 标签不应该有不透明度，如果你在浏览器中查看 css 则不会，但我仍然可以看到 ul 和 li 标签后面的 h1 文本。

Answer 1

nav {
  width: 100%;
  //background: #000;
  //opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.8);
}

ul {
  background: green;
  //opacity: 1;
}

<nav>
  <ul>
    <li>Link1</li>
    <li>Link2</li>
  </ul>
</nav>
<header>
  <h1>123</h1>
</header>

使用rgba()怎么样？

Answer 2

您需要使用rgba()，其中第4个参数采用0.0表示完全透明，最高1.0表示完全不透明，而前三个参数采用red、blue, green 您要使用的颜色值。

nav {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

ul {
  background: green;
  opacity: 1;
}

<nav>
  <ul>
    <li>Link1</li>
    <li>Link2</li>
  </ul>
</nav>
<header>
  <h1>123</h1>
</header>

Css opacity attribute