Question

我是firefox的最后一个版本，没有办法让蒙版工作。我阅读了关于这个问题的所有讨论，并没有采用任何解决方案。

我也为对象分配了一个ID（掩码的文件是SVG）

这是代码

<img id="immy" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/05/22-amazing-landscape.jpg">

CSS

#immy
{
    -webkit-mask-image: url(cerchio.svg); /*chrome*/
    mask: url(cerchio.svg#cer); /*firefox*/
}

在chrome中一切正常，而在FF中我只看到一个完整的白页（如果蒙版覆盖了所有图像）。

Answer 1

CSS Masks是目前仅在Webkit中实现的实验性功能。它们在Firefox，Internet Explorer或任何其他非webkit浏览器中都不是当前完全支持。

来源：http://caniuse.com/#search=mask

SVG元素的所有主流浏览器（包括IE9 +）都支持蒙版。走这条路线会给你带来更加一致的体验。见http://jsfiddle.net/jonathansampson/S7ctE/

<svg width="100" height="100">
    <defs>
        <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="http://i.imgur.com/7Nlcay7.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
    <polygon fill="url(#a)" points="25 0, 50 0, 75 0, 100 25, 100 50, 100 75, 75 100, 50 100, 25 100, 0 75, 0 50, 0 25" />
</svg>

Answer 2

你的firefox版本必须是3.5（1.9.1）或更新版本。

在此链接中查看更多内容：https://developer.mozilla.org/en-US/docs/CSS/mask

掩码不适用于Firefox

2 个答案: