Máscaras que no funcionan en Gecko

Question

Estoy tratando de enmascarar un elemento que tiene algunas imágenes dentro de él, usando solo css. he hecho esto y funciona bien en webkit usando -webkit-mask-box-image y está haciendo justo lo que quiero, pero estoy teniendo problemas para usar otros navegadores.

se supone que gecko funciona usando mask, y esa etiqueta aparece en firebug, pero en realidad no usa la máscara ... también he intentado convertir el png im usando base64 uri de datos, pero fue en vano.

ejemplo: http://jsfiddle.net/nNLta/

¿alguien sabe la forma correcta de hacer esto?

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

ejemplo: http://jsfiddle.net/nNLta/

Answer 1

Parte 1

mask no es lo mismo que mask-box-image por desgracia. Si lees el (bastante escaso) docs, verás que solo se aplica a SVG. Más sobre esto más tarde.

Actualmente Gecko no es compatible con 'mask-box-image'; si search the MDN verá que se aplica solo a -webkit.

Además, no creo que esto sea realmente una especificación. Webkit ha tenido esta capacidad/concepto por edades (en varias formas, como -webkit-box-reflect) y creo que es solo una resaca de aquellos días. No estoy seguro de si esto será adoptado por todos los proveedores de navegadores (aunque espero, y tiene sentido que lo haga).

Parte 2

Para utilizar la propiedad depende mask: CSS SVG es necesario crear un elemento SVG y hacer referencia a eso. Here is a guide. No he usado esta técnica antes, así que me temo que son todos los detalles en los que voy a entrar en este momento.

Una opción alternativa

Si no es necesario repetir una máscara inteligente/crecimiento por qué no crear una gran png y superponer el texto/imagen que desea ocultar. No estoy seguro de entender lo que finalmente estás tratando de hacer, pero esto me parece bastante simple. El problema obvio es cuando necesitas que las cosas detrás de la máscara sean seleccionables/interactivas (err..interactive eso es ...); por ejemplo, cuando desea aplicar enmascaramiento a texto o enlaces. Una forma de evitar esto es usar pointer-events:none que es compatible con Gecko y Webkit (pero nada más ...). Aquí está more from the MDN

Lo siento, no tengo mejores noticias: si ninguna de las anteriores es útil, no dude en dejar un comentario con sus requisitos específicos y veremos si no podemos evitar las limitaciones del navegador.

Espero que ayude esto!