口罩壁虎

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

對不起，我沒有更好的消息 - 如果以上都不是有幫助的請隨時發表評論與您的​​具體要求，我們會看到，如果我們不能變通解決瀏覽器的限制。

希望這是有幫助的！