Css不透明度属性[重复]答案

【问题标题】：Css opacity attribute [duplicate]Css不透明度属性[重复]
【发布时间】：2017-10-10 15:25:45
【问题描述】：

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

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，它不会，但我仍然可以看到@987654327 @ul 和 li 标签后面的文字。

【问题讨论】：

【解决方案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()怎么样？

【讨论】：

【解决方案2】：

您需要使用rgba()，其中第四个参数采用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>

【讨论】：