parent 的不透明度不适用于 child 元素

Question

我到处都找遍了，找不到问题所在。我在 parent 元素上设置了不透明度，但不透明度似乎不适用于 child 元素。

用谷歌搜索这个问题只会出现 "How to apply an opacity without affecting a child element " 这样的结果。但在我的例子中，当我需要 child 元素受到 parent 的不透明度值影响时，"not" 元素会受到影响。

示例代码如下：

<span style="opacity: 0.5">
  <div>hello</div>
</span>

Answer 1

啊，看来我终于明白了...

父元素是一个 span 标签，将其更改为 div 标签并且不透明度开始按预期工作.这是在 chrome.

只是把它放在这里以防有人犯同样的错误。

Answer 2

问题是你把一个块元素（比如div）放在行内元素（比如span）里面，这从一开始就是错误的。

如果你把一个内联元素（比如button）放在一个内联元素（比如span）里面就可以了。

span {
  opacity: 0;
}

<span>
  <button>Inline Element, works!</button>
</span>

此外，您不必将 span 替换为 div，只需将 span 设置为 display: inline-block。

span {
  opacity: 0;
  display: inline-block;
}

<span>
  <div>Block Element, But parent span too. works!</div>
</span>

parent's opacity not working on child elements