你可以使用 CSS 混合模式干净地堆叠半透明 div 吗？答案

【问题标题】：Can you use CSS blend modes to stack semi-transparent divs cleanly?你可以使用 CSS 混合模式干净地堆叠半透明 div 吗？
【发布时间】：2021-05-23 00:04:16
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css transparency opacity mix-blend-mode

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

【讨论】：

屏蔽是一种聪明的工作！我得试一试。