我有一个内容元素 .
元素 - 包含其内容 - 应在左侧完全不透明,在右侧完全透明 . 从右到左均匀分级 .
由于它合并的内容和背景不固定,因此无法提前制作图像 .
我知道渐变可以用作背景(-moz-linear-gradient),但这对我没有帮助 - 在这里,我需要元素本身的内容淡出 .
我已经能够在IE(Alpha Mask)和Webkit(图像掩码)中做到这一点,但已经完全陷入了FF .
如果有办法,我不介意使用SVG .
请帮忙?
一个肮脏的解决方案是将div精确地叠加在元素的顶部,背景在左侧完全透明,在右侧使用线性渐变完全不透明 .
我知道这不漂亮,但它应该工作;)
我认为一个肮脏的解决方案可能是利用rgba值 . 通过这些,您可以在div上设置webkit和moz渐变,该div位于您所谈论的内容的正上方 .
我不确定你是否可以拥有IE渐变的alpha值 . 解决方案的唯一问题是这个div背后的对象的交互性丢失了
本页介绍了如何为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);
3 回答
一个肮脏的解决方案是将div精确地叠加在元素的顶部,背景在左侧完全透明,在右侧使用线性渐变完全不透明 .
我知道这不漂亮,但它应该工作;)
我认为一个肮脏的解决方案可能是利用rgba值 . 通过这些,您可以在div上设置webkit和moz渐变,该div位于您所谈论的内容的正上方 .
我不确定你是否可以拥有IE渐变的alpha值 . 解决方案的唯一问题是这个div背后的对象的交互性丢失了
本页介绍了如何为FF 3.5实现此目的
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
你可能想在这个名为mask.svg的文件中使用这样的东西:
然后在CSS中包含以下内容: