Непрозрачность радиального градиента на фоновом изображении

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>