CSS3属性不透明度

时间:2009-07-30 11:17:45

标签: css3 elements opacity

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

例如

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

2 个答案:

答案 0 :(得分:5)

你做不到。你需要在父母身上超级强加(定位和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>

答案 1 :(得分:1)

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