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

我有一个元素，里面有内容。Firefox不透明度（透明度）渐变 - 淡出图像

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

由于合并到的内容和背景不固定，因此无法提前制作图像。我知道渐变可以用作背景（-moz-linear-gradient），但是这并不能帮助我 - 在这里，我需要元素本身的内容淡出。

我已经能够在IE（Alpha Mask）和Webkit（image-mask）中做到这一点，但已经完全陷入了FF。

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

请帮忙？

来源

2010-04-13 SamGoody

最新的Firefox有自己的-webkit-mask-image可以与CSS3渐变一起使用吗？ – 2011-11-13 06:32:58

此页解释了如何做到这一点的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);

来源

2010-07-28 13:49:26 danjwilson

最新的Firefox有自己的-webkit-mask-image可以与CSS3渐变一起使用吗？ – 2011-11-13 06:23:16

感谢您的支持！ – eSentrik 2015-05-28 14:40:10

-2

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

我知道这是不是很漂亮，但它应该工作;）

来源

2010-04-13 21:53:17

我不明白这会有什么帮助。我需要看到元素背后的背景，这是一个相当复杂和不断变化的背景。如何用另一个div来实现这样的结果呢？ – SamGoody 2010-04-14 06:28:41

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

我不确定您是否可以获得IE渐变的Alpha值。解决方案唯一的问题是，这个div背后的对象的交互性丢失了

来源

2011-03-18 10:30:57

实际上，这个解决方案最大的问题是图像不会变得透明。如果应该显示的背景也具有渐变，则不会显示 – SamGoody 2011-03-21 09:18:18

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

回答

相关问题