是否可以创建一个元素,通过它“背后”的 x 层来创建透明度?
示例:我的图层的 z 索引为 1、2、3、4,而 1 是红色。然后我创建了一个“第 5”层,我想切断第 2、3、4 层的颜色并看到红色。这可能吗?
最佳答案
您可以尝试使用新的mix-blend-mode
和/或background-blend-mode
(如果您有背景图片)目前正在为 Compositing and blending Level 1 推荐候选人.
引用文献:blend modes , 和 mix-blend-mode .
不过请注意,这是当前的 not supported by IE, Edge and Opera .
在下面的示例中,您可以看到顶级 div
显示 红色 从最低级 div
渗透。
示例片段:
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
div {
width: 120px; height: 120px;
position: absolute;
top: 16px; left: 16px;
}
div:nth-of-type(2) { top: 32px; left: 32px; mix-blend-mode: difference; }
div:nth-of-type(3) { top: 48px; left: 48px; mix-blend-mode: overlay;}
div:nth-of-type(4) { top: 64px; left: 64px; mix-blend-mode: multiply; }
<div class="red">1</div>
<div class="blue">2</div>
<div class="green">3</div>
<div class="yellow">4</div>
关于通过多层的 HTML/CSS 透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32760485/