0

我有最新版本的 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 中我只看到一个全白页面（例如，如果掩码覆盖了所有图像）。

4

2 回答 2

4

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>
于 2013-03-09T17:53:50.147 回答
0

您的 Firefox 版本必须是 3.5 (1.9.1) 或更新版本。

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

于 2013-03-09T18:29:20.100 回答