在没有样式子元素的情况下设置元素的不透明度

Question

我有<div>标记，我已将其设置为opacity: 0.5;。在<div>代码中，我有一个<iframe>我不想拥有50％的不透明度。我想知道是否可以设置<div>元素的样式并排除<iframe>元素中的<div>元素。

Answer 1

不透明度未继承，但因为父级具有适用于其中所有内容的不透明度。 您不能使子元素的透明度低于父元素。所以：

• 将opacity设置为子元素，iframe。
除外
• 如果您的父母有透明背景，请使用rgba或透明png。

Answer 2

正如@ROX所说，你做不到。在我看来，设置其他子元素的不透明度可能是不错的选择。试试这个：

.your_div *:not(iframe) {
    opacity: 0.5;
}

另一种选择是使用具有relative位置的包装器以及在该包装器内具有absolute位置的所有其他元素。 JSFiddle