Firefoxのリニアグラデーションを使用したマスク画像

Question

次のスニペットはChromeで完全に機能します。背景画像は背景の背景に向かって色が薄くなります。

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-image: url("http://i.imgur.com/wcDxIZG.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    -webkit-mask-image: linear-gradient(black, black, transparent); 
 
    mask-image: linear-gradient(black, black, transparent); 
 
}

<div></div>

しかし、それは、Firefoxで動作しない、値が不正確であると言われています。

なぜですか？そして私はそれをどのように修正できますか？

オーバーレイとして別のdivを使用する方法を知っていますが、それはコンテンツと要素にあまりにも多くの結果をもたらすので、私にとっては一般的な解決策ではありません。position私が興味を持っている唯一の答えは、divの背景を修正するものです。

Answer 1

Firefox 53（2017年4月19日リリース）から、画像マスキングのサポートが完了しました。

は、あなたは、FirefoxのすべてのバージョンでSVGを避けることができない、と言って[caniuse.com]（http://caniuse.com/#search=mask-image）としてhttp://caniuse.com/#search=mask

Answer 2

私は理由を知りませんが、このために:afterプロパティを使用して効果を複製することができ、これはすべてのブラウザで動作します - でも、私たちの古い友人IE：

.container { 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-image: url("http://i.imgur.com/wcDxIZG.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.image:after { 
 
    content: ''; 
 
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAFAFA', endColorstr='#FAFAFA'); 
 
    background-image: -webkit-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%); 
 
    background-image: -ms-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%); 
 
    background-image: linear-gradient(to bottom, rgba(2248, 244, 243, 0) 0%, #fafafa 100%); 
 
    display: block; 
 
    position: absolute; 
 
    pointer-event: none; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 20%; 
 
}

<div class="container"> 
 
    <div class="image"></div> 
 
</div>