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

【问题标题】：Make a transparent inner div non-opaque through an opaque parent通过不透明的父级使透明的内部 div 不透明
【发布时间】：2014-10-27 08:43:50
【问题描述】：

我希望能够在不透明度为 0.2 的父 div 中拥有一个透明度为 1 的透明 div，这样主体颜色蓝色在“rect”div 类中就不会不透明。我已经提供了一个我希望 DOM 是怎样的例子。在不以任何方式修改 DOM 的情况下这是否可能？

最好的问候， J

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;
}

【问题讨论】：

在这里很难说出你想要什么。你是说你想在.rect 中看到身体背景颜色显示？你能不能模拟一些屏幕？
嗨，是的：我希望它看起来像这样：除了我不希望 .rect 有背景颜色：蓝色。我希望它有一个背景颜色：透明；模拟：jsfiddle.net/eb1ew9mt/6
AFAIK 你不能用 CSS 做到这一点
检查这个然后html5rocks.com/en/tutorials/masking/adobe

标签： html css

【解决方案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;
}

【讨论】：

背景不透明度的位置属性has no effect。