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

【问题标题】：Firefox Opacity (Transparancy) Gradient - Fading out an imageFirefox 不透明度（透明度）渐变 - 淡出图像
【发布时间】：2011-02-07 12:41:27
【问题描述】：

我有一个包含内容的元素。

元素及其内容应该在左侧完全不透明，在右侧完全透明。从右到左均匀分级。

由于它要合并的内容和背景不固定，无法提前制作图像。

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

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

如果有办法，我不介意使用 SVG。

请帮忙？

【问题讨论】：

最新的 Firefox 是否有自己的等价物 -webkit-mask-image 可以与 CSS3 渐变一起使用？

标签： css firefox transparency opacity gradient

【解决方案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);

【讨论】：

最新的 Firefox 是否有自己的等价物 -webkit-mask-image 可以与 CSS3 渐变一起使用？

【解决方案2】：

我相信一个肮脏的解决方案可能是利用 rgba 值。有了这些，您可以在 div 上设置 webkit 和 moz 渐变，该 div 位于您谈论的内容的正上方。

我不确定您是否可以为 IE 渐变设置 alpha 值。该解决方案的唯一问题是该 div 后面的对象的交互性丢失了

【讨论】：

其实这个方案最大的问题就是图片没有变透明。如果应该显示的背景也有渐变，它将不会显示

【解决方案3】：

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

我知道这不漂亮，但它应该可以工作；）

【讨论】：

我看不出这有什么帮助。我需要查看元素背后的背景，这是一个相当复杂且不断变化的背景。用另一个 div 覆盖它如何实现这样的结果？