父母的不透明度不适用于子元素[关闭]答案

【问题标题】：parent's opacity not working on child elements [closed]父母的不透明度不适用于子元素[关闭]
【发布时间】：2018-10-12 04:19:23
【问题描述】：

我到处找，找不到问题所在。我在父元素上设置不透明度，但不透明度似乎不适用于子元素。

谷歌搜索该问题只会显示“如何在不影响子元素的情况下应用不透明度”之类的结果。但在我的情况下，当我需要子元素受到父元素的不透明度值影响时，它们“不会”受到影响。

这里是示例代码：

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

【问题讨论】：

【解决方案1】：

问题是您将块元素（例如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>

【讨论】：

这也有效，谢谢！只是想添加“显示：块”也有效，我想与上述相同的原因..
inline-block 和 block 都将内联元素转换为 block。（还有flex 等）但是，重要的是，不要将块元素放在行内元素中。使用不同的浏览器可能会给您带来麻烦。
感谢您的提问。我在使用 Vue 时遇到了类似的问题。在某些时候，跨度停止影响子 div。可能包含内联块的 span 的某些本机类已被删除

【解决方案2】：

啊，看来我终于想通了……

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

把这个放在这里，以防有人犯同样的错误。

【讨论】：