CSS3 属性不透明度

Question

我如何才能只影响父元素而不是其子元素的不透明度

，例如，

我希望将signup_backdrop不透明度设置为0.5，但它是子元素signup_box，我根本不想有任何不透明度，但它将应用在中设置的不透明度signup_backdrop 继承。

Answer 1

你不能。 您需要将子项叠加（定位和 z 索引）到父项之上，这意味着它们将不再是子项。 或者使用透明 PNG 作为父背景，并为完全不透明子元素的任何同级元素设置不透明度。

*未经测试，但应该很好。

.signup_backdrop {
  position:fixed;
  top:0; left:0;
  background:#333333;
  width:100%; height:100%;
  z-index:10;
}
    
.signup_box {
  position:fixed;
  top:25%; left:25%;
  background:#ffffff;
  width:50%; height:50%;
  z-index:20;
}

<div class="signup_box">
   <p>Hello World</p>
</div>
<div class="signup_backdrop"></div>

Answer 2

在 CSS 3 中，您可以使用 rbga() 为某个元素添加颜色和不透明度。
到目前为止，它仅在 Safari 3 和 Firefox 3 中实现。
对于其他浏览器，请使用 Jonathan Sampson 的答案中的技巧。