Firefox不透明度（透明度）渐变-淡出图像

Question

我有一个带内容的元素。

这个元素 - 连同它的内容 - 应该在左侧完全不透明，右侧完全透明。从右到左均匀渐变。

由于它要和合并进去的内容和背景都没有固定，因此无法提前制作一张图片。

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

我已经在 IE (Alpha Mask) 和 Webkit (image-mask) 中做到了这一点，但是在 Firefox 中却完全被难住了。

如果有 SVG 的方法也可以。

请帮帮我？

- SamGoody

---

最新的Firefox是否有自己的等效物来替代-webkit-mask-image，可以与CSS3渐变一起使用？ - Web_Designer

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

- danjwilson

---

最新的Firefox是否有自己的等效物来替代-webkit-mask-image，可以与CSS3渐变一起使用？ - Web_Designer

Answer 2

我认为一个不太优秀的解决方案可以利用 rgba 值。使用这些值，您可以在覆盖所述内容的 div 上设置一个 webkit 和 moz 渐变。

我不确定 IE 渐变是否可以具有 alpha 值。这种解决方案的唯一问题在于丢失了该 div 后面对象的交互性。

- Jonathan Mui

---

实际上，这个解决方案最大的问题是图像不会变成透明的。如果应该显示的背景也有渐变，它将无法透过显示。 - SamGoody

Answer 3

一个容易实现的解决方法是使用线性渐变，将一个div叠加到要操作的元素上，左侧背景完全透明，右侧完全不透明。

我知道这不是很美观，但应该能够解决问题 ;)

- Javier Parra

---

我不认为这会有帮助。我需要看到元素背后的背景，这是一个相当复杂和变化的背景。用另一个div覆盖它如何实现这样的结果？ - SamGoody