Radial gradient opacity on background image

问题

I need to apply a radial gradient of opacity to a repeating background image.

The proposed solutions online recommend to add another solid color gradient over the image giving the illusion of a fading background image. However, this solid color gradient solution will not work in my case because the background is not a solid color, but rather a linear gradient.

Here is an exaggerated example of what I'm trying to achieve using a bright red repeating background image and a grey to black gradient background.

How can I actually fade a background image?

回答1:

Use 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>

来源：https://stackoverflow.com/questions/58071243/radial-gradient-opacity-on-background-image