通过不透明的父级使透明内部div不透明

Question

我希望能够在父div中具有不透明度为1的透明div，其具有0.2的不透明度，使得体色蓝色在＆＃34; rect＆＃34;中不是不透明的。 div类。我已经提供了一个我希望DOM如何的例子。这可能不以任何方式修改DOM吗？

最诚挚的问候， Ĵ

http://jsfiddle.net/eb1ew9mt/2/

body {
    background:blue;
}
.mybody {
    width:300px;
    height:300px;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    z-index:-1;
}

.rect {
    width:100px;
    height:100px;
    background-color:transparent;
    z-index:999;
    opacity:1;
}

Answer 1

你在这里。

http://jsfiddle.net/eb1ew9mt/1/

所有你需要做的就是使内部元素与相对父元素相比绝对定位。

body {
    background:blue;
}
.mybody {
    width:300px;
    height:300px;
    background-color:rgba(0,0,0,0.2);
    position:relative;
}

.rect {
    width:100px;
    height:100px;
    background-color:rgba(0,0,0,1);
    position:absolute;
}