Firefox Opacity (Transparancy) Gradient - Fading out an image

Question

I have an element with content inside it.

The element - with its content - should be fully opaque on the left , fully transparent on the right. Evenly graded from right to left.

As the content and background it is merging into are not fixed, there is no way to make an image in advance.

I am aware that gradients can be used as backgrounds (-moz-linear-gradient), but that doesn't help me - here, I need the contents of the element themselves to fade out.

I have been able to do this in IE (Alpha Mask) and Webkit (image-mask), but have been completely stumped in FF.

I don't mind using SVG if there is a way there.

Please help?

Answer 1

A dirty solution would be to superimpose a div exactly on top of the element with the background fully transparent on the left and fully opaque on the right using linear gradients.

I know this is not pretty, but it should work ;)

Answer 2

This page explains how to achieve this for FF 3.5+

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

You probably want something like this in a file called 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"&gt;
<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>

Then include the following in your CSS:

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