Modo de máscara - Trucos CSS

Tabla de contenido

La mask-modepropiedad CSS indica si la imagen de la capa de máscara CSS se trata como una máscara alfa o una máscara de luminancia.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Sintaxis

mask-mode: alpha | luminance | match-source

La propiedad acepta un valor de palabra clave o una lista separada por comas de dos o los tres valores alpha, luminancey mask-source.

Valor inicial: match-source
Se aplica a: todos los elementos. En SVG, se aplica a los elementos contenedores excluyendo el elemento, todos los elementos gráficos.
Heredado: no
Valor calculado: como se especifica
Tipo de animación: discreto

Valores

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: especifica que los valores alfa (canal alfa) de la imagen de la capa de máscara deben utilizarse como valores de máscara.
luminance: especifica que los valores de luminancia de la imagen de máscara deben utilizarse como valores de máscara.
match-source: el valor predeterminado, que establece el modo de máscara en alfa si la referencia de máscara de la mask-imagepropiedad es un elemento CSS como una URL de imagen o un degradado. Sin embargo, si la referencia de máscara de la mask-imagepropiedad es un elemento SVG , se debe usar el valor especificado por la propiedad de tipo de máscara del elemento referenciado .
initial: aplica la configuración predeterminada de la propiedad, que es match-source.
inherit: adopta el valor en modo máscara del padre.
unset: elimina el modo de máscara actual del elemento.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para los modos de máscara y cada valor se aplica a una imagen de capa de máscara correspondiente especificada en la propiedad de imagen de máscara.

En el siguiente ejemplo, el primer valor especifica el modo de máscara correspondiente a la primera imagen, el segundo valor para la segunda imagen, etc.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Máscaras alfa y luminancia

El enmascaramiento en CSS viene con dos métodos que tienen algunas diferencias en el cálculo de los valores de la máscara.

Máscaras alfa

Las imágenes están hechas de píxeles, cada píxel tiene algunos datos que contienen valores de color y quizás valores alfa con información de transparencia. Una imagen con un canal alfa puede ser una máscara alfa , como imágenes PNG con áreas negras y transparentes.

En una simple operación de enmascaramiento, tenemos un elemento y una imagen de máscara colocados encima. El valor alfa de cada píxel en la imagen de la 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 está enmascarada (es decir, oculta).
Un valor alfa de uno (es decir, completamente opaco) permite que ese píxel del elemento sea visible.
Un valor entre 0 y 1 (por ejemplo, 0,5) permite que el píxel sea visible pero con un cierto nivel de transparencia.

Entonces, en este método, el valor de la máscara en un punto dado es simplemente el valor del canal alfa en ese punto de la imagen de la máscara y los canales de color no contribuyen al valor de la máscara.

El siguiente ejemplo es una máscara alfa que solo contiene áreas negras (valor alfa de 1) y transparentes (valor alfa de 0) y puede ver el resultado que tiene algunas partes completamente visibles y otras completamente transparentes:

Usando un PNG con un canal alfa como imagen de máscara

Pero en el siguiente ejemplo, estamos usando un degradado que tiene un nivel diferente de transparencia. El resultado no solo es visible o transparente, sino que hay algunas áreas translúcidas:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Y así es como se ve el resultado en el navegador:

Usar un degradado lineal como imagen de máscara

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; cuando el valor alfa es 1, los valores de la máscara varían según el canal de color de ese píxel. Por ejemplo, cuando el color es blanco, el elemento es visible; en el caso del área negra, el elemento está oculto.

Si bien el cálculo de los valores de máscara en una máscara alfa se basa solo en los valores alfa de la imagen de máscara, los valores de máscara de una máscara de luminancia se calculan a partir de la luminancia y los valores alfa. Los navegadores hacen esto en los siguientes pasos:

Calcule un valor de luminancia a partir de los valores del canal de color.
Multiplique el valor de luminancia calculado por el valor alfa correspondiente para producir el valor de la máscara.

/ explicación Para obtener más información sobre estos cálculos, puede consultar la sección de procesamiento de máscaras en la especificación del Módulo 1 de enmascaramiento CSS del Borrador del editor de septiembre de 2019.

A continuación se muestra una imagen de máscara con un sol blanco en el centro y áreas transparentes alrededor. Como puede ver, las áreas while son completamente visibles:

Usar una imagen PNG con un canal alfa y áreas blancas como imagen de máscara

Y en el siguiente ejemplo, se utiliza un degradado de colores como imagen de máscara y puede ver el efecto de diferentes colores en los valores de máscara en el modo de luminancia: