Question

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

Google搜索问题只会产生类似＆＃34;如何应用不透明度而不影响子元素的结果＆＃34;。但就我而言，子元素是＆＃34;而不是＆＃34;当我需要它们受到父母不透明度值的影响时受到影响。

以下是示例代码：

Input

Answer 1

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

父元素是 span 标记，将其更改为 div 标记，并且不透明度开始按预期工作。这是铬合金。

如果有人犯了同样的错误，请把它放在这里。

Answer 2

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

如果将内联元素（例如button）放在内联元素（例如span）中，则可以正常工作。

＆＃13;

span {
  opacity: 0;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;