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

This question already has answers here:

I do not want to inherit the child opacity from the parent in CSS

(14个回答)


4年前关闭。




嘿，我正在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中的背景图像而不是颜色

最佳答案

如果在: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;
}

检查此fiddle

关于css - 如何在父div中设置不透明度而不影响子div中的透明度？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10879045/