Html 淡出div的各个角落--在不同的背景上

我在游戏初始屏幕上使用静态黑色背景实现了这一点：

[

如果太小：

正如你所看到的，它在黑色背景下工作，但当我们在任何其他背景下，我们只看到黑色而不是实际背景

这是有道理的，因为我使用了一个梯度，比如：

#waves::before {
    left:0;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}

#waves::after {
    right:0;
    background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);

}

Soo…从技术上讲，它是按预期工作的。我只是不知道如何像我希望的那样工作

我的目标是：淡出div，使波形角看起来淡出

我是如何尝试的：

waves

是一个div，所以我利用了

前

和

后

psuedo元素，并给它一个大于所需的宽度（因此有一些重叠），然后使用渐变来淡入淡出

如果有人知道怎么做，那就太好了

我做了搜索，从中我得到了渐变的想法。我找不到任何适合这个用例的东西（多个背景）

澄清一下，这是我的目标：

---

由于您的图像大部分为黑色，您可以使用混合模式将其覆盖在背景上

保持你用黑色在侧面遮住它的方式

.bkg{
宽度：100%；
高度：300px；
背景图片：url(http://lorempixel.com/400/200);
背景尺寸：封面；
}
.覆盖{
宽度：100%；
高度：100px；
位置：绝对位置；
顶部：200px；
背景图像：线性渐变（向右，黑色，透明），线性渐变（向左，黑色，透明），url(https://i.stack.imgur.com/hhk0G.png);
背景尺寸：20%100%，20%100%，封面；
背景位置：左中、右中、中中；
背景重复：无重复；
混合模式：屏幕；
}

您不能使用SVG或其他东西吗？这似乎是向量的一个优点，因为掩码似乎是您所需要的，但问题是-（a）纯CSS掩码对浏览器的支持非常差，只能在WebKit支持的浏览器中使用；（b）我认为，SVG掩码只有在应用于SVG

元素时才能在IE中工作。您不能使用它来屏蔽具有背景图像的普通HTML元素。因此，我认为您必须采用后一种方法（SVG方法），但我不知道这是否能解决您的问题。