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>

는 값이 정확하지 않을 수 있다고합니다.

왜? 어떻게 해결할 수 있습니까?

오버레이로 다른 div를 사용하는 방법을 알고 있습니다. 콘텐츠와 요소에 너무 많은 결과가 있으므로 일반적인 해결책은 아닙니다. position. 관심있는 유일한 대답은 div의 배경을 수정하는 것입니다.

는

Answer 1

Firefox 53 (2017 년 4 월 19 일에 발표 됨)부터 시작하여 이미지 마스킹 지원이 완료되면 이제 가능합니다.

는 [caniuse.com] (http://caniuse.com/#search=mask-image), 당신은 파이어 폭스의 모든 버전에서 SVG를 피할 수없는 말을

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>