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

Answer 2

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

我不确定你是否可以拥有IE渐变的alpha值。该解决方案的唯一问题是该div背后的对象的交互性丢失

Answer 3

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

我知道这不漂亮，但应该有效;）

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

3 个答案: