背景图像上的径向渐变不透明度 [英] 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.

如何实际上淡化背景图像?

推荐答案

使用

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

这篇关于背景图像上的径向渐变不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！