如何在父div中设置不透明度而不影响子div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (50)

我想父DIV中的不透明度,但不是子DIV:

例 :

HTML:

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

CSS:

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}
提问于
用户回答回答于

如果你在伪类中定义你的背景图像可能会很好:after。这样写:

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}
用户回答回答于

这个方法比较久了,但不失为一个好方法:

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动