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

一尘不染

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

css

嘿，我正在Google搜寻，但我找不到完美的答案

我想在父级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;
}

注： - 我想 背景图像 中Parent Div没有颜色

阅读 252

2020-05-16

共1个答案

一尘不染

如果您在伪类中定义 背景图像 ，可能会很好: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;
}

2020-05-16