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它不会，但我仍然可以在h1和ul代码后面看到li文字。

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不透明度属性

2 个答案: