Firefox Opacity(Transparancy)Gradient - 淡出图像

Question

我有一个内容元素.

元素 - 包含其内容 - 应在左侧完全不透明,在右侧完全透明.从右到左均匀分级.

由于它合并的内容和背景不固定,因此无法提前制作图像.

我知道渐变可以用作背景(-moz-linear-gradient),但这对我没有帮助 - 在这里,我需要元素本身的内容淡出.

我已经能够在IE(Alpha Mask)和Webkit(图像掩码)中做到这一点,但已经完全陷入了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 中包含以下内容：

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