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

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>

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

Radial gradient opacity on background image

css

background-image