Css 背景图像的径向梯度不透明度

我需要对重复的背景图像应用不透明度的径向梯度

在线建议的解决方案建议在图像上添加另一个纯色渐变，以产生背景图像褪色的错觉。但是，这种纯色渐变解决方案在我的例子中不起作用，因为背景不是纯色，而是线性渐变

这里是一个夸张的例子，我试图通过使用一个明亮的红色重复背景图像和一个从灰色到黑色的渐变背景来实现

如何使背景图像褪色？

使用

.box{
宽度：300px；
高度：200px；
背景：url(https://picsum.photos/id/10/600/800)中心/盖；
-webkit面罩：径向梯度（20%40%的圆形，透明，#fff 50%）；
遮罩：径向梯度（20%40%的圆形，透明，#fff 50%）；
}
身体{
背景：粉红色；
}

哇，太快了！非常好用，我以前从未听说过css中的掩码。非常感谢！这似乎也掩盖了div中的任何内容。它不仅仅是背景图像上的遮罩。在这个div中还有其他元素显示吗？@mrg95使用一个伪元素作为背景层，并对其应用掩码。认为它像不透明度，如果你应用它，你将影响所有content@mrg95检查这个伪元素技巧：让它完美地工作！你是个巫师。再次感谢：）