グラデーションの不透明度（マスク画像）で停止を指定

Question

this questionから、私は以下のコードを動作させることができました。

しかし、それは私が欲しいのとまったく同じではありません。早く消えてしまいたい調査の結果、gradient（およびwebkit-gradient）はlinear-gradientに置き換えられました。私はそれを使用しようとしましたが、それはmask-imageで動作しないようです。

特定の停止で画像をフェードアウトさせるにはどうすればよいですか？例えば、0％の不透明度、75％の0.25の不透明度、100％の0.5の不透明度など。

img { 
 
    position: absolute; 
 
    z-index: 5; 
 
    top: 0; left: 0; 
 
    -webkit-mask-image: 
 
    -webkit-gradient(
 
     linear, 
 
     left top, 
 
     left bottom, 
 
     from(
 
     rgba(0,0,0,1) 
 
    ), to(
 
     rgba(0,0,0,0) 
 
    ) 
 
    ) 
 

 
} 
 

 
#bg1 { 
 
    position: absolute; 
 
    left: 0; width: 50px; 
 
    height: 360px; 
 
    background-color: red; 
 
} 
 
#bg2 { 
 
    position: absolute; 
 
    left: 50px; width: 50px; 
 
    height: 360px; 
 
    background-color: blue; 
 
}

<img src="http://www.gstatic.com/webp/gallery/1.jpg"> 
 
<div id="bg1"></div> 
 
<div id="bg2"></div>

Answer 1

linear-gradient()を行います（つまり、あなたはイメージダウン道の75％まで、赤と青のストライプは表示されません）

img { 
 
    position: absolute; 
 
    z-index: 5; 
 
    top: 0; left: 0; 
 
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent); 
 
    mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent); 
 
} 
 

 
#bg1 { 
 
    position: absolute; 
 
    left: 0; width: 50px; 
 
    height: 360px; 
 
    background-color: red; 
 
} 
 
#bg2 { 
 
    position: absolute; 
 
    left: 50px; width: 50px; 
 
    height: 360px; 
 
    background-color: blue; 
 
}

<img src="http://www.gstatic.com/webp/gallery/1.jpg"> 
 
<div id="bg1"></div> 
 
<div id="bg2"></div>