我正在寻找关于 Gecko 浏览器/Firefox 中是否有等效于 -webkit-mask 的可靠答案?
如果没有,有没有办法将 CSS 中的 -webkit-mask 降级为直接的背景图像处理,或者我应该放弃并使用 Javascript?
非常感谢!
如果你的目标是 Firefox,它有很好的 SVG 支持,所以你现在可以使用 SVG 掩码而不是 CSS。这是 Mozillas 关于如何在 SVG Webkit 中制作蒙版的文档 蒙版不是标准轨道 - 所以我个人怀疑您是否会在跨浏览器中看到它们。
在为此苦苦挣扎了几个小时后,我终于能够在我的网站上应用一个复杂的 SVG 路径作为 div 元素的掩码,并且它可以在 Firefox 中使用。这是我所做的:
首先,对于 Webkit 浏览器,该解决方案是理想的,我只需要制作一个与我想要屏蔽的 div 大小相同(或实际上相同的形状,可能是不同的比例)的扁平 png 文件,并且我的区域想要以黑色显示,而我想要剪掉的部分是透明的。然后,我在 CSS 中为要屏蔽的 div 元素添加了以下行:
-webkit-mask-box-image: url(path/to/mask.png);
那很简单!现在让我们来看看让这个在 Firefox 中工作的有趣部分。要使此方法起作用,矢量形状必须与您要遮盖的区域的大小完全相同。所以我的蒙版是在 Fireworks 中设计的相对复杂的矢量路径,我需要将其转换为 SVG 路径,幸运的是,我有 Illustrator 可用。否则,请使用您最喜欢的 SVG 编辑器将您的形状路径转换为 SVG。如果您还使用 Fireworks 绘制矢量形状,您可以右键单击要使用的矢量形状,转到“编辑”->“复制路径轮廓”,然后将其粘贴到足够大的在 Illustrator 或您使用的任何 SVG 编辑器中创建文档。
接下来,您需要将其导出为 SVG 文件。在 Illustrator 中,我使用了“Export for Web”功能,选择了 SVG 格式,版本 1.0,并将其导出为 SVG 文件。位置和文档大小并不重要,因为我们只是在路径描述之后,我们将丢弃其余部分。
因此,现在使用文本编辑器(例如文本编辑器或记事本)打开您刚刚创建的 SVG 文件。您会看到一些 XHTML 格式的内容,其中一个元素特别像:
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>
对于复杂的形状,该d="..."
部分可能会有很多行。这是我们关心的这个 SVG 文件的唯一部分。
接下来,我们必须将描述此路径的 SVG 掩码嵌入到我们的站点 HTML 中。首先,让我们在 HTML 中添加以下元素:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="maskid" maskUnits="userSpaceOnUse">
<path fill="white" d=""/>
</mask>
</defs>
</svg>
现在,我们只需d=""
从我们之前保存的 SVG 文件(即 M0,43v0...)中复制路径元素的属性内容,然后粘贴到d=""
嵌入的 SVG 掩码元素中的路径元素的相同属性中。然后,我们可以将以下条目添加到要屏蔽的元素的 CSS 中:
mask: url("#maskid");
而已。现在应该将路径作为掩码应用到您指定的元素。
这是诀窍,您需要将 svg 文件中生成的所有点转换为等于点路径除以掩码尺寸的比率。
为了更容易解释,我制作了一个快速工具来帮助设计师将他们的 svg 转换为与 firefox 兼容的掩码,您可以在我的网站 ( http://www.prollygeek.com ) 上看到现场演示,例如 facebook logo 和 twitter logo 只是掩码,这里是您可以用来将 svg 转换为掩码的工具:http: //prollygeek.com/svg-mask/
例如:
<mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311
c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>
将转向:
<mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>
请不要忘记添加此属性 style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"
并填充任何颜色,没关系。
然后将你的面具链接到你想要的 css 元素:
例如:
mask:url(images/fb.svg#fb);
该计算器是免费使用的,但请不要在其他任何地方复制或发布。
您可以将带有 css 的 svg 过滤器应用于 Gecko 中的 HTML 内容。这是一个喜欢摆弄 mozilla 代码的人的例子。它是从 2008 年开始的,所以它可能有点过时了。