通过多个层实现HTML / CSS透明度

Question

是否可以创建一个元素，通过x个数量的层来创建透明度＆＃39;它？

示例：我的z-index为1,2,3,4，而1为红色。然后我创建一个＆＃39; 5th＆＃39;层，我想切割层2,3,4的颜色，并通过看到红色。这可能吗？

Answer 1

您可以尝试新的mix-blend-mode和/或background-blend-mode（，如果您有背景图片），目前正在推荐Compositing and blending Level 1。< / p>

参考文献：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>

Answer 2

通过多个元素透明化

让我们尝试一下：

＆＃13;

＆＃13;

div {
  width: 500px;
  height: 300px;
  border: 50px solid transparent;
}
.a1 {
  background-color: rgba(255, 0, 0, 1);
}
.a2 {
  background-color: rgba(255, 165, 0, 0.5);
}
.a3 {
  background-color: rgba(0, 128, 0, 0.5);
}
.a4 {
  background-color: rgba(0, 0, 255, 0.5);
}
.a5 {
  background-color: rgba(238, 130, 238, 0.5);
}

＆＃13;

<div class="a1">
  <div class="a2">
    <div class="a3">
      <div class="a4">
        <div class="a5">
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

似乎所有元素都有透明度。

Answer 3

您可以在css中指定该颜色的颜色和透明度， 如果不透明度的组合都不是100％，那么你应该能够混合各种颜色。

这看起来像是：

.elclass{
   background-color:#f00;
   opacity:.2; //20% opacity;
}

如果您不希望对象的不透明度为20％，而只是使用背景颜色：

.elclass{
   background-color:rgba(255,0,0,.2);
}

然而，

rgba颜色不是100％浏览器安全。