Maskenbild mit linearem Farbverlauf auf Firefox

Question

Der folgende Ausschnitt funktioniert perfekt auf Chrome: Das Hintergrundbild verblasst in den Hintergrund dahinter nach unten.

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>

Aber es auf Firefox nicht funktioniert, wird der Wert, sagte falsch.

Warum? Und wie kann ich das beheben?

Beachten Sie, dass ich weiß, wie man ein anderes Div als Overlay verwendet, was für mich keine allgemeine Lösung ist, da es zu viele Konsequenzen für Inhalt und Element position hat. Die einzigen Antworten, die mich interessieren, sind diejenigen, die den Hintergrund des div fixieren.

Answer 1

Ab Firefox 53 (freigegeben am 19. April 2017) ist dies jetzt möglich, da die Unterstützung von Maskierungsbildern abgeschlossen wurde.

Siehe http://caniuse.com/#search=mask

Answer 2

Ich weiß nicht, warum, aber Sie können mit Hilfe der :after Eigenschaft für diese die Wirkung replizieren, und das funktioniert für alle Browser - auch unser alter Freund 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>