그래디언트 불투명도 (마스크 이미지)에서 정지 지정

Question

this question에서 아래 코드를 사용할 수있었습니다.

그러나 정확하게 원하는 것은 아닙니다. 나는 그것이 빨리 사라 지길 원해. 몇 가지 조사를 마치면 gradient (및 webkit-gradient)이 linear-gradient으로 바뀌 었습니다. 나는 이것을 사용하려고 시도했지만 mask-image과 작동하지 않는 것 같습니다.

그렇다면 어떻게 이미지를 특정 스톱으로 페이드 아웃 할 수 있습니까? 예를 들어, 0 %의 불투명도, 75 %의 불투명도, 100 %의 불투명도.

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>