带有图像的透明径向渐变？ [复制]

Question

我看到一个带有简洁渐变和部分遮蔽图像的网站，我如何使用 CSS 实现这一点？我猜想使用带有径向的绝对叠加，但我不太擅长渐变...这是掩蔽吗可能是？还是纯 CSS？

效果： https://i.imgur.com/WiIP5wk.png

<div style="position:relative; width:100%; height:600px; background-image:url('/background-image.jpg');>
    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px;></div>
</div>

Answer 1

多个背景可以近似这个：

html {
  min-height:100%;
  background:
    radial-gradient(60% 110% at top right,transparent 80%,red ),
    url(https://picsum.photos/id/1016/800/800) center/cover;
}

也可以屏蔽：

.box {
  height:100vh;
  background:url(https://picsum.photos/id/1016/800/800) center/cover;
  -webkit-mask:radial-gradient(60% 110% at top right,white 80%,transparent);
}

body {
 margin:0;
 background:red;
}

<div class="box"></div>