如何分层 CSS 不透明度？答案

【问题标题】：How do I layer CSS opacity?如何分层 CSS 不透明度？
【发布时间】：2014-12-09 18:50:53
【问题描述】：

我正在尝试纯粹使用 CSS 在 HTML 列表中创建特定的悬停效果。悬停时，“背景”nav 元素应为半透明，而“前景”li 应为全透明。

nav {
  font-size:2.0em;
}
nav:hover {
  background-color: #0000ff;
  opacity: 0.5;
}
nav li:hover {
  background-color: #ff0000;
  opacity: 1.0;
}

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

不幸的是，li 悬停似乎已经获得了一半的不透明度，即使已指定 opacity:1.0。

为什么会发生这种情况，我错过了什么？

【问题讨论】：

你能解释一下吗？
它不起作用，因为您的 LI 标签在 NAV 内，我的意思是您的 NAV 标签将是 50% 的不透明度，然后您的 LI 标签将是 50% 的 100%。意义将保持不变。
当您将<nav> 设置为opacity:.5 时，您也在为其子项设置不透明度。您需要在background-color 中指定透明度（通过rgba()）或提供不是<nav> 子级的背景。
@SajadLfc 你需要知道什么？

标签： html css opacity

【解决方案1】：

这是你想要的吗？

nav {
  font-size:2.0em;
}
nav:hover {
  background-color: rgba(0,0,255,0.5);
}
nav:hover li {
  opacity:0.5;
}
nav li:hover {
  background-color: #ff0000;
  opacity: 1.0;
}

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

编辑

关于“为什么”部分：

根据MDN：

该值适用于整个元素，包括其内容，即使该值不被子元素继承。因此，一个元素及其包含的子元素都具有相同的不透明度相对到元素的背景，即使元素及其子元素有相对于彼此不同的不透明度。

和

计算值：指定值，裁剪在[0,1]范围内

因此，如果您将opacity:0.5 设置为<nav>，则它的所有子代都将共享与“基础”相同的不透明度。由于opacity 只能在[0,1] 范围内，因此<nav> 内的<li>s 不能有超过0.5 的实际不透明度。

使用rgba 设置<nav> 的背景颜色，nav:hover li{opacity:0.5} 将透明度应用于每个<li> 本身，从而可以针对特定的li:hover 设置不同的不透明度。

【讨论】：

很好，但我在这个答案中遗漏了“为什么”。
@GolezTrol 我不太确定 OP 到底想要什么，所以我只是在猜测（所以 sn-p 无法在评论中证明）。我将参考参考更新“为什么”部分。

【解决方案2】：

背景颜色必须使用rgba()，因为不透明度会影响子元素：

nav:hover {
  background-color: rgba(0, 0, 255, 0.5);
}

看这里：

nav {
  font-size:2.0em;
}
nav:hover {
  background-color: rgba(0, 0, 255, 0.5);
}
nav li:hover {
  background-color: #ff0000;
}

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

【讨论】：

【解决方案3】：

你也可以这样做：

nav {
  font-size:2.0em;
  position: relative;
}

nav:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  background-color: #0000ff;
  z-index: -1;
}

nav:hover:after {
  opacity: 0.5;
}
nav li:hover {
  background-color: #ff0000;
}

<nav>
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</nav>

【讨论】：

这可能适用于不支持 rgba 的 IE8，谢谢