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日發佈）開始，現在可以支持掩蔽圖像。

見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>