Firefox 불투명도 (투명도) 그라디언트 - 이미지 페이드 아웃

Question

내용이있는 요소가 있습니다.

내용물이있는 요소는 왼쪽이 완전히 불투명하고 오른쪽이 완전히 투명해야합니다. 오른쪽에서 왼쪽으로 균등하게 등급이 매겨집니다.

병합 할 내용과 배경이 고정되어 있지 않으므로 미리 이미지를 만들 수있는 방법이 없습니다.

그라디언트를 배경으로 사용할 수는 있지만 그다지 도움이되지 않는다는 것을 알고 있습니다. 여기서 필자는 요소 자체의 내용을 페이드 아웃해야합니다.

IE (Alpha Mask) 및 Webkit (image-mask)에서이 작업을 수행 할 수 있었지만 FF로 완전히 뒤죽박죽되었습니다.

방법이있는 경우 SVG를 사용해도 상관 없습니다.

도와주세요.

Answer 1

이 페이지는 FF 3.5

https://developer.mozilla.org/en/applying_svg_effects_to_html_content

이를 달성하는 방법을 설명 당신은 아마 파일이 뭔가를 원하는 라는 mask.svg :

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    baseProfile="full"> 
    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1"> 
      <stop stop-color="white" offset="0"/> 
      <stop stop-color="white" stop-opacity="0" offset="1"/> 
     </linearGradient> 
     <rect x="0" y="0" width="1" height="1" fill="url(#g)"/> 
     </mask> 
</svg> 

그런 다음 당신의 CSS에 다음을 포함한다 :

,536,

mask: url(/path/to/mask.svg#m1); 

Answer 2

더러운 해결책은 왼쪽 상단이 완전히 투명하고 오른쪽이 완전히 불투명 한 선형 그라디언트를 사용하여 div 상단에 요소를 정확히 겹쳐 놓는 것입니다.

나는이 꽤 아니라는 것을 알고 있지만, 그것을 작동합니다)

Answer 3

저는 더러운 해결책이 rgba 값을 이용할 수 있다고 생각합니다. 이들과 함께 div에 웹킷과 moz 그라디언트를 설정했는데, 이는 여러분이 이야기 한 내용 바로 위의 위치입니다.

IE 그라디언트의 알파 값을 사용할 수 있는지 확실하지 않습니다. 해결책의 유일한 문제는이 div 뒤에있는 객체에 대한 상호 작용이 손실된다는 것입니다.