Question

我正在尝试使用css屏蔽其中包含一些图像的元素。我已经做到了这一点，并且它在使用-webkit-mask-box-image的webkit中工作得很好，并且它正在做我想要的，但我在使用其他浏览器时遇到了麻烦。

gecko应该使用mask工作，并且该标记确实显示在firebug中，但它实际上并没有使用掩码..我也尝试将png im转换为使用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);
    }

示例：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并覆盖您想要隐藏的文本/图像。我不确定我明白你最终想要做什么，但这对我来说似乎很简单。显而易见的问题是，当你需要掩码背后的东西可选择/可交互时（错误......是交互式的......）;例如，当您希望将屏蔽应用于文本或链接时。解决这个问题的方法是使用Gecko和Webkit支持的pointer-events:none（但没有别的......）。这是more from the MDN

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

希望这有用！

面具不在Gecko工作

1 个答案: