如何从停留（或任何其他 html 元素）中剪切形状答案

【问题标题】：how to cut shapes from a layover (or any other html element)如何从停留（或任何其他 html 元素）中剪切形状
【发布时间】：2019-10-24 03:06:31
【问题描述】：

首先我知道这个问题之前（3 年前）here 已经提出过，但我找不到合适的解决方案，所以我再次尝试。

我正在尝试实现以下设计：我指的是这个覆盖层，它似乎缺少一部分。

我的想法是设置背景图像（第一个 div），然后用这个渐变背景覆盖（第二个 div）覆盖它，然后以某种方式从这个覆盖中减去这个旋转的形状（第三个 div）。

天真地我以为我会找到一种方法来实现这个减法运算，但在这里我经过两天的尝试。

我已经阅读了很多关于屏蔽的内容，但找不到正确使用它的方法。

所以我的问题是：这种减法方法是正确的方法吗？如果是，我该如何实现？如果不？你们还能提供什么其他解决方案？

非常感谢！

艾维塔

【问题讨论】：

我猜你正在寻找混合模式而不是切割形状
您应该分享您的代码以及您在搜索后尝试过的内容，但没有找到类似的问题。你的问题是一个糟糕的问题。
@TemaniAfif 正是我所缺少的。谢谢大佬。
@G-Cyr 认为这个问题很清楚。没有要分享的代码，只是一个想法，我不知道如何实现。无论如何，我下次会尝试提供更多详细信息。

标签： html css

【解决方案1】：

mix-blend-mode 关闭前的示例：（回答了 mix-blend-mode 的乐趣）

html {
  background: linear-gradient(90deg, rgb(165, 192, 253), rgb(247, 128, 132));
  padding: 2em;
  height: 100%;
}

body {
  width: 900px;
  margin: auto;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 50px, rgba(255, 255, 255, 1) 500px), url(https://www.bing.com/th?id=OIP.VYbZz4O-gR8sw8sRHAvh-gHaEK&pid=Api&rs=1 ) no-repeat white;
  height: 100%;
  min-height: 800px;
  background-size: 100% auto;
  position: relative;
}

body:after,
body:before {
  content: '';
  border-radius: 15%;
  width: 75%;
  padding-top: 75%;
  background: #ccc;
  position: absolute;
  right: 0;
  transform: rotate(45deg) translate(-10%, -50%);
  mix-blend-mode: overlay;
  z-index: -1;
}

body:after {
  z-index: 1;
  background: #000
}

【讨论】：

谢谢！正是我需要的。