我正在尝试仅使用 css 来屏蔽其中包含一些图像的元素。
我已经做到了这一点,它在使用 -webkit-mask-box-image
的 webkit 中运行良好,它做的正是我想要的,但我在使用其他浏览器时遇到了问题。
gecko 应该使用 mask
工作,并且该标记确实出现在 firebug 中,但它实际上并没有使用掩码。我也尝试过将 im 使用的 png 转换为 base64 数据 uri ,但无济于事。
有谁知道这样做的正确方法吗?
HTML
<div id='wrap'>
<div class='masked flashing-anim'>
<div class='the-mask' >
<ul>
<li class='blink_1'></li>
<li class='blink_2'></li>
</ul>
</div>
</div>
<div class='the-outline'>
<img src='img/real-stuff.png' height=500 />
</div>
</div>
CSS
#wrap {
position: relative;
}
.the-outline, the-mask {
position: absolute;
top: 0;
}
.the-mask {
height: 500px;
width: 360px;
-webkit-mask-box-image: url(../img/the-mask.png);
-moz-mask-box-image: url(../img/the-mask.png);
-o-mask-box-image: url(../img/the-mask.png);
mask-box-image: url(../img/the-mask.png);
mask: url(data:lotsofchars);
}
最佳答案
第 1 部分
不幸的是,mask
与 mask-box-image
不同。如果您阅读(相当稀疏)docs您会看到它仅适用于 SVG。稍后会详细介绍。
目前 Gecko 不支持 'mask-box-image' - 如果你 search the MDN您会看到它仅适用于 -webkit-。
此外,我不认为这实际上是规范。 Webkit 长期以来一直具有这种功能/概念(以各种形式,如 -webkit-box-reflect
),我认为这只是那些日子的宿醉。我不确定这是否会被所有浏览器供应商采用(尽管我希望,而且这是有道理的)。
第 2 部分
要使用依赖于 svg 的 mask:
css 属性,您需要创建一个 SVG 元素并引用它。 Here is a guide .我以前没有使用过这种技术,所以恐怕这就是我现在要介绍的所有细节。
替代方案
如果您不需要巧妙的重复/增长蒙版,为什么不创建一个大的 png 并覆盖您希望隐藏的文本/图像。我不确定我是否理解您最终想要做什么,但这对我来说似乎很简单。一个明显的问题是当你需要掩码后面的东西是可选择的/可交互的(错误的..交互式的......);例如,当您希望对文本或链接应用 mask 时。解决此问题的方法是使用 Gecko 和 Webkit 支持的 pointer-events:none
(但仅此而已...)。这是 more from the MDN
抱歉,我没有更好的消息 - 如果以上都没有帮助,请随时根据您的具体要求发表评论,我们将看看是否无法解决浏览器限制。
希望对您有所帮助!
关于firefox - 面具在 Gecko 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9241285/