你能使用 CSS 混合模式来干净地堆叠半透明 div 吗？

Question

我想要一堆具有半透明背景的 DIV，例如卡片。但是，我不希望这样做时它们的 alpha 值相加。例如在下面的示例中，我的两张卡片重叠：

我希望重叠区域不要更暗，而是要与 dividual 卡片的颜色相同（它们的不透明度和颜色都相同）。我知道我可以放置一个“背景”div 来重置 alpha 并模仿这种效果，但由于背景不是纯色，所以这很明显。

我正在查看 mix-blend-mode 和 background-blend-mode，但无法弄清楚它们是否达到了我正在寻找的效果。作为熟悉 Photoshop 的人，我认为这些选项中的任何一个都行不通，但希望有人知道它的作用。

我能想到的唯一替代方法是以编程方式制作狭长的 DIV，并将它们附加到我的顶部卡片的底部以模拟堆叠效果。但是，我不确定如何根据需要最好地显示后续卡片。

Answer 1

你可以模拟这个使用mask:

.box {
  height:300px;
  position:relative;
  background:url(https://picsum.photos/id/1018/800/600) center/cover
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  -webkit-mask:
    /* your first div          position  /  size  */
    linear-gradient(#fff 0 0)  20px 50px / 30%  20%,
    /* your second div         position  /  size  */
    linear-gradient(#fff 0 0)  30px 50px / 20%  30%,
    /* your third div          position  /  size  */
    linear-gradient(#fff 0 0)  80%  0    / 100px 200px;
    /*and so on ...*/
  -webkit-mask-repeat:no-repeat;
}

<div class="box">

</div>

你能使用 CSS 混合模式来干净地堆叠半透明 div 吗？

Can you use CSS blend modes to stack semi-transparent divs cleanly?

css

transparency

opacity

mix-blend-mode