口罩壁虎

Question

不工作我试图掩盖了它内部的一些图像，只使用CSS的元素。 我已经做到了这一点，它在使用的WebKit工作-webkit-mask-box-image罚款，它只是在做我想做的，而是使用其他的浏览器有问题IM。

壁虎应该工作使用mask，并且该标记确实显示在萤火虫中，但它实际上并没有使用掩码..我也尝试转换使用base64数据uri的png im，但无济于事。

例如：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。稍后再说。

目前壁虎不支持“面具盒图像” - 如果你search the MDN你会看到它仅适用于-webkit-。

另外，我不认为这实际上是规范。 Webkit已经有了这样的能力/概念（像-webkit-box-reflect这样的各种形式），我认为这只是那些日子的宿醉。我不确定这是否会被所有浏览器供应商采用（尽管我希望，而且这是合理的）。

第2部分

要使用你需要创建一个SVG元素，并引用了SVG依赖mask: CSS属性。 Here is a guide。我之前没有使用过这种技术，所以恐怕这就是我现在要做的所有细节。

的替代选项

如果你并不需要一个聪明的重复/成长面具为什么不创建一个大PNG和覆盖文本/图片要隐藏。我不确定自己理解你最终想做什么，但这对我来说似乎很简单。显而易见的问题是，当你需要掩模背后的东西是可选/可交互的（err..interactive即...）;例如当你想对文字或链接应用蒙版。解决这个问题的方法是使用Gecko和Webkit支持的pointer-events:none（但没有别的......）。这里的more from the MDN

对不起，我没有更好的消息 - 如果以上都不是有帮助的请随时发表评论与您的​​具体要求，我们会看到，如果我们不能变通解决浏览器的限制。

希望这是有帮助的！