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

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>