Firefox Opacity (Transparancy) Gradient - Fading out an image

I have an element with content inside it.

The element - with its content - should be fully opaque on the left ,开发者_C百科 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?

---

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">
<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);

---

I believe a dirty solution could be to take advantage of rgba values. With those, you setup a webkit and moz gradients on a div that is position right over the content you talked about.

I'm not sure if you can have alpha values for IE gradients. The only problem with the solution is that interactivity for the object behind this div is lost

---

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 ;)