面罩在 Gecko 中不起作用
Posted
技术标签:
【中文标题】面罩在 Gecko 中不起作用【英文标题】:Masks not working in Gecko 【发布时间】:2012-03-03 17:16:01 【问题描述】:我正在尝试仅使用 css 来掩盖其中包含一些图像的元素。
我已经这样做了,它在使用-webkit-mask-box-image
的 webkit 中运行良好,它做的正是我想要的,但我在使用其他浏览器时遇到了问题。
gecko 应该使用mask
工作,并且该标签确实出现在 firebug 中,但它实际上并没有使用掩码。我也尝试将 png im 使用转换为 base64 数据 uri,但无济于事.
示例:http://jsfiddle.net/nNLta/
有谁知道这样做的正确方法吗?
<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);
示例:http://jsfiddle.net/nNLta/
【问题讨论】:
【参考方案1】:第 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 并覆盖您想要隐藏的文本/图像。我不确定我是否理解你最终想要做什么,但这对我来说似乎很简单。明显的问题是当你需要掩码后面的东西是可选择/可交互的(err..interactive 就是......);例如,当您希望对文本或链接应用掩码时。解决这个问题的一种方法是使用 Gecko 和 Webkit 支持的 pointer-events:none
(但没有别的......)。这里是more from the MDN
抱歉,我没有更好的消息 - 如果以上都没有帮助,请随时发表评论说明您的具体要求,我们会看看是否无法解决浏览器限制。
希望对您有所帮助!
【讨论】:
确实,掩码不是规范的一部分,尽管some say 建议将它们标准化。我自己也不太了解,真的。 实际上,您建议的替代选项在我看来是我真正想要实现的。我用这个是一个动画类型的东西,这个面具只是让它变得“漂亮”。我想我真的不得不将它限制在 webkit 中......或者尝试为面具制作一个 svg。不过经验不多……还是谢谢 没问题!如果替代选项对您有用,如果分层不是问题,您可以在所有浏览器中实现这一点,或者如果您需要使用pointer-events:none
,则可以在 FF、Safari 和 Chrome 中实现
我失去了你...不,实际上我没有看到指针事件是如何进入这个的,而且分层显然是一个问题,因为我就是这样屏蔽...它基本上是一个颜色层,带有一个蒙版,还有一层。
当我说“问题”时,我的意思是您添加的图层会导致问题。例如,如果您在某些文本上添加纹理,但需要能够选择/单击文本,则图层会妨碍该文本。在这种情况下,您可以使用pointer-events
来启用对图像层“下方”的元素的交互。以上是关于面罩在 Gecko 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
代码不起作用 - SetDwordValue 在 vbs 中不起作用
为啥 heightForHeaderInSection 在 iOS 4.3 中不起作用?
为啥 setVisibility() 在 onResumeFragments() 中不起作用?