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

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

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

我的板块代码如下:

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> 

扫码关注云+社区

领取腾讯云代金券