掩码在 Firefox 中不起作用答案

【问题标题】：Masks won't work in Firefox掩码在 Firefox 中不起作用
【发布时间】：2013-03-09 17:51:39
【问题描述】：

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

【问题讨论】：

请注意，我经常将“cer”分配给 svg 形状的 ID 属性。
看看stackoverflow.com/questions/8414348/… 是否适合您？通过谷歌搜索“mdn mask image”找到

标签： html css firefox

【解决方案1】：

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

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

所有主要浏览器（包括 IE9+）都支持 SVG 元素的掩码。走这条路会给你带来更一致的体验。见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>

【讨论】：

出于某种原因，我已经好几周无法访问 caniuse...“糟糕！Google Chrome 无法连接到 caniuse.com”...我猜猜只有我？
@AnnaLica 我只是在阅读相同的资源；它试图传达的内容相当混乱。我怀疑它只是在谈论 SVG，但这样做有点令人困惑。
其实我用的是svg文件，没有成功
@AnnaLica 我会鼓励你走 SVG 路线。你会得到更好的全面支持，而且不会太复杂。上面已添加示例。
@AnnaLica 您的问题是如何屏蔽image，而不是video。

【解决方案2】：

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

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

【讨论】：