css - CSS3 属性不透明度

Question

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

例如，

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

Answer 1

你不能。您需要将子代强加于父代（定位和 z-index），这意味着它们将不再是子代。那，或者对父背景使用透明的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 回答中的技巧。