面具不在Gecko工作

Question

我试图掩盖一个元素,里面有一些图像,只使用CSS.我已经做到了这一点,它在webkit使用-webkit-mask-box-image和它正在做我想要的,但我很难使用其他浏览器.

gecko应该使用mask,并且该标签确实显示在firebug中,但它实际上并没有使用掩码..我也尝试将png im转换为base64数据uri,但无济于事.

示例:http: //jsfiddle.net/nNLta/

有谁知道这样做的正确方法？

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);
    }

示例:http: //jsfiddle.net/nNLta/

Answer 1

第1部分

mask与不幸不一样mask-box-image。如果您阅读（相当稀疏的）文档，您会发现它仅适用于 SVG。稍后会详细介绍这一点。

目前 Gecko 不支持“mask-box-image”——如果您搜索 MDN，您会发现它仅适用于 -webkit-。

另外，我不认为这实际上是规范。Webkit 多年来一直拥有这种功能/概念（以各种形式，例如-webkit-box-reflect），我认为这只是那些日子的后遗症。我不确定这是否会被所有浏览器供应商采用（尽管我希望它会被采用，而且这是有道理的）。

第2部分

要使用 svg 依赖的mask:css 属性，您需要创建一个 SVG 元素并引用它。这是一个指南。我以前没有使用过这种技术，所以恐怕这就是我现在要介绍的所有细节。

另一种选择

如果您不需要巧妙的重复/生长蒙版，为什么不创建一个大的 png 并覆盖您想要隐藏的文本/图像。我不确定我是否理解您最终想要做什么，但这对我来说似乎很简单。明显的问题是，当您需要遮罩后面的内容可供选择/可交互时（呃……交互式，即……）；例如，当您希望对文本或链接应用屏蔽时。解决这个问题的一种方法是使用pointer-events:noneGecko 和 Webkit 中支持的（但没有其他的......）。以下是来自 MDN 的更多内容

抱歉，我没有更好的消息 - 如果以上都没有帮助，请随时留下您的具体要求的评论，我们将看看是否无法解决浏览器限制。

希望这有帮助！