即使显式声明，不透明度声明也会从父级继承[重复]答案

【问题标题】：Opacity declaration is inherited from parent even if declared explicitly [duplicate]即使显式声明，不透明度声明也会从父级继承[重复]
【发布时间】：2016-02-16 14:20:45
【问题描述】：

我有以下 CSS

.dropdown-menu {
  background-color: black;
  opacity: 0.6;
  color: white;
}
.dropdown-menu > li {
  background-color: black;
  opacity: 1;
  color: white;
}

加载 HTML 元素（使用上面的 CSS）时，我从 .dropdown-menu 获得了预期的不透明度集，问题是当我使用 @987654324 时，这个不透明度是在 dropdown-menu > li 元素事件中继承的@关于不透明度的声明。

那么如何克服这个问题（父元素上的不透明度应该保持 0.6）并且在这个孩子上我想要不透明度 1？

【问题讨论】：

Afaik 这是不可能的。如果父元素具有不透明度，则所有子元素至多具有该不透明度。如果父项和子项的不透明度均为 0.5，则子项的不透明度为 0.25。
@Paulie_D 错误的问题被标记为重复，应重新打开或重新投票给另一个问题作为重复。

标签： html css

【解决方案1】：

不要使用opacity 作为父元素，而是以rgba 格式声明颜色。

.dropdown-menu {
  background-color: rgba(0,0,0,.6);
  color: rgba(255,255,255,.6);   
}

这样，您将保留父元素的opacity，以及您的子元素的不透明度为 1。

Browser support 同样也不错。

另外，我在你的问题中读到了这一点，“问题是这种不透明度是继承的”

不，它不是继承的。

【讨论】：

这是正确的答案，尤其是关于继承的附录。

【解决方案2】：

知道opacity 设置元素及其所有子元素的不透明度值很重要；其中RGBA 仅为单个声明设置不透明度值。

所以你应该使用类似的东西：

.dropdown-menu {
    background-color: rgba(0,0,0,.6);
    color: rgba(255,255,255,.6);   
}

(当然，你也可以使用HSLA-property。)

请记住，并非所有浏览器都完全支持opacity-属性，请查看此 SA 主题以获取更多信息：CSS background opacity with rgba not working in IE 8

【讨论】：