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的答案中的技巧。

CSS3属性不透明度

2 个答案: