css - 背景图像上的径向渐变不透明度

Question

我需要对重复的背景图像应用不透明度的径向渐变。

在线建议的解决方案建议在图像上添加另一个纯色渐变，从而产生背景图像褪色的错觉。但是，这种纯色渐变解决方案不适用于我的情况，因为背景不是纯色，而是线性渐变。

这是一个夸张的示例，说明我使用明亮的红色重复背景图像和灰色到黑色的渐变背景试图实现的效果。

我怎样才能真正淡化背景图像？

Answer 1

使用mask

.box {
  width:300px;
  height:200px;
  background:url(https://picsum.photos/id/10/600/800) center/cover;
  -webkit-mask:radial-gradient(circle at 20% 40%, transparent , #fff 50%);
          mask:radial-gradient(circle at 20% 40%, transparent , #fff 50%);
}

body {
 background:pink;
}

<div class="box">

</div>