私はゲーム上の静的な黒の背景を使用してこの作業を持っている

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%); 

} 

スヨン。私はそれがうまくいくようにそれをする方法を理解できません。

私の目標：波形コーナーがフェードアウトするように、divをフェードアウトします。 wavesはdiv要素であるので、私はbeforeとafter擬似要素を活用し、それに必要なよりも大きな幅を与えた（ので、いくつかの重複がある）、その後、フェードするグラデーションを使用：私はそれを試みた方法

。

誰かがこれを行う方法を知っていれば、それは素晴らしいことでしょう！

私は検索をしました。これはどこから勾配のアイデアを得たかです。私は明確にするため、このユースケース（複数の背景）

に合うものを見つけることができませんでした、これが私の目標です：

Answer 1

あなたのイメージは、ほとんどが黒なので、あなたがミックスモードを使用することができますそれをバックグラウンドの上に重ねる。

そして、あなたはSVGか何かを使用することはできません

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

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