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

问题描述

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

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

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

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

解决方法

您可以模拟这种用法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.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>