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>