面罩在 Gecko 中不起作用

Question

我正在尝试仅使用 css 来掩盖其中包含一些图像的元素。 我已经这样做了，它在使用-webkit-mask-box-image 的 webkit 中运行良好，它做的正是我想要的，但我在使用其他浏览器时遇到了问题。

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 不同。如果您阅读（相当稀疏的）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

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

希望对您有所帮助！