淡出div的角落 - 在不同的背景下

Question

我在游戏启动画面上使用静态黑色背景工作：

[

如果太小：http://i.imgur.com/VzLViDB.png

正如你所看到它适用于黑色背景，但当我们处于任何其他背景时，我们只看到黑色而不是实际背景。

这是有道理的，因为我使用的渐变如：

#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，所以我利用before和after伪元素，并给它一个比所需宽度更大的宽度（所以有一些重叠） ，然后用渐变淡化。

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

我做了搜索，这是我从中得到渐变的想法。我无法找到适合此用例（多个背景）的任何内容

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

Answer 1

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

并保持用两侧黑色掩盖它的方式

＆＃13;

＆＃13;

.bkg {
  width: 100%;
  height: 300px;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 200px;
  background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png);
  background-size: 20% 100%, 20% 100%, cover;
  background-position: left center, right center, center center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

＆＃13;

<div class="bkg"></div>
<div class="overlay"></div>

＆＃13;

＆＃13;

＆＃13;