tipo máscara

La mask-typepropiedad CSS indica si el maskelemento SVG se trata como una máscara alfa o una máscara de luminancia.

mask {  mask-type: alpha;}

Cuando la capa de máscara es una imagen o un degradado, mask-modese puede establecer una propiedad en el elemento HTML para especificar el tipo de máscara. Sin embargo, si se utiliza un elemento SVG maskcomo capa de máscara, se mask-typepuede configurar en el maskpropio elemento. La mask-modepropiedad puede anular esta preferencia.

Sintaxis

mask-type: alpha | luminance

La propiedad acepta un valor de palabra clave de los valores alfa y de luminancia.

• Valor inicial: luminance
• Se aplica a: mask elementos
• Heredado: no
• Valor calculado: longitud absoluta
• Tipo de animación: discreta

Valores

/* Keyword values */mask-type: alpha;mask-type: luminance;/* Global values */mask-type: inherit;mask-type: initial;mask-type: unset;

• luminance: El valor predeterminado. Los valores de luminancia de la máscara se utilizan para los valores de la máscara.
• alpha: Los valores alfa (canal alfa) de la máscara se utilizan para los valores de la máscara.
• initial: Aplica el valor predeterminado de la propiedad, luminance.
• inherit: Adopta el mask-typevalor del padre.
• unset: Elimina la corriente mask-typedel elemento.

Máscaras alfa y de luminancia

¿Alfa? ¿Luminancia? Vale la pena visitar estos términos en relación con el enmascaramiento CSS.

Máscaras alfa

Las imágenes están hechas de píxeles, donde cada píxel contiene valores de color. Y algunos valores de color contienen un canal alfa para establecer la transparencia del color. Una imagen con un canal alfa puede ser una máscara alfa , como las imágenes PNG con áreas transparentes.

En una operación de enmascaramiento simple, tenemos un elemento y una imagen de máscara colocada encima de él. El valor alfa de cada píxel en la imagen de máscara se fusionará con su píxel correspondiente en el elemento.

• Si el valor alfa es cero (es decir, transparente), gana y esa parte del elemento queda enmascarada (es decir, oculta).
• Un valor alfa de uno (es decir, completamente opaco) muestra esos píxeles.
• Un valor alfa entre 0 y 1 (por ejemplo, 0,5) permite que el píxel sea visible, pero con un cierto nivel de transparencia.

En pocas palabras, el valor de la máscara en un punto determinado es el valor del canal alfa en ese punto de la imagen de la máscara. Si ese punto es completamente transparente (es decir, un valor alfa de 0), entonces no se mostrará. Lo contrario ocurre con un punto completamente opaco (es decir, un valor alfa de 1), donde ese punto se muestra completamente.

El siguiente ejemplo es una máscara alfa que solo contiene áreas negras (es decir, valor alfa de 1) y transparentes (es decir, valor alfa de 0).

Máscaras de luminancia

En una máscara de luminancia , los colores y los valores alfa son importantes. Cuando el valor alfa es 0 (es decir, completamente transparente), el elemento está oculto. Los valores de la máscara varían según el canal de color de ese píxel cuando el valor alfa es 1. Por ejemplo, cuando el color es blanco, el elemento es visible; en el caso del área negra, el elemento queda oculto.

Vimos que el cálculo de los valores de máscara en una máscara alfa se basa únicamente en los valores alfa de la imagen de la máscara. Por otro lado, los valores de máscara de una máscara de luminancia se calculan a partir de los valores de luminancia y alfa. Así es como responde el navegador:

1. Primero, calcula un valor de luminancia a partir de los valores del canal de color.
2. Luego, multiplica ese valor de luminancia calculado por el valor alfa correspondiente para producir el valor de máscara.

Consulte la especificación del Módulo 1 de enmascaramiento CSS del borrador del editor de septiembre de 2019 para obtener más información.

A continuación se muestra exactamente el mismo ejemplo que vimos para las máscaras alfa, pero con una diferencia: esta vez, tenemos un área blanca completamente opaca en el centro (en lugar de negro) rodeada por áreas transparentes a su alrededor. Como puedes ver, el área blanca es completamente visible tal como lo era con la máscara alfa negra:

Ejemplo

El siguiente ejemplo utiliza un elemento de máscara con áreas negras y transparentes:

divPut a nice mask on me!/divsvg  mask    path fill="black" d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" /  /mask    /svg

Usando el ID del elemento ( #mask), podemos colocar la máscara en el divelemento.

div {  width: 100px;  height: 100px;  background-color: #134;  mask-image: url(#mask);}     

Como esta máscara tiene áreas negras y transparentes, mask-typeconfiguramos alpha:

mask {  mask-type: alpha; }

Si el elemento de ruta tuviera áreas blancas, el valor predeterminado, luminancefuncionaría perfectamente bien aquí.

Este ejemplo solo funciona en Firefox en el momento de escribir este artículo.

Soporte del navegador

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	79+	35+	24+	6.1+	15+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Sí	Sí	81+	7+	59+

Más información

Recorte y enmascaramiento en CSS

Chris Coyier

Enmascaramiento versus recorte: cuándo usar cada uno

Sara Drasner

#185: Jugar con máscaras CSS

Chris Coyier

Propiedades relacionadas

clip de máscara

.element { mask-clip: padding-box; } Mojtaba Seyedi

imagen-mascara

.element { mask-image: url(star.svg); } Chris Coyier

modo máscara

.element { mask-mode: alpha; } Mojtaba Seyedi

origen-mascarilla

.element { mask-origin: content-box; } Mojtaba Seyedi

posición de la máscara

.element { mask-position: 20px center; } Mojtaba Seyedi

repetición de máscara

.element { mask-repeat: repeat-y; } Chris Coyier

tamaño de máscara

.element { mask-size: 200px 100px; } Mojtaba Seyedi