Firefox不透明(透明)渐变-淡出图像

本页说明如何在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中包含以下内容:

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

我认为一个肮脏的解决方案可能是利用rgba值。通过这些,您可以在div上设置一个webkit和moz渐变,该渐变位于您所讨论的内容的正上方。

我不确定你是否能得到ie渐变的alpha值。解决方案的唯一问题是这个div后面的对象的交互性丢失了

一个肮脏的解决方案是使用线性渐变将div完全叠加在元素的顶部,背景在左侧完全透明,在右侧完全不透明。

我知道这不好看,但应该管用;)