modo máscara

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 alphay .luminancemask-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: según lo especificado
Tipo de animación: discreta

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 usarse como valores de máscara.
luminance: especifica que los valores de luminancia de la imagen de máscara deben usarse 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 imageelemento 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 utilizar maskel valor especificado por la propiedad de tipo de máscara del elemento referenciado .mask
initial: aplica la configuración predeterminada de la propiedad, que es match-source.
inherit: adopta el valor del modo de 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, y así sucesivamente.

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

Máscaras alfa y de 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 tal vez valores alfa con información de transparencia. Una imagen con un canal alfa puede ser una máscara alfa , como las imágenes PNG con áreas negras y 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) 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 puedes ver el resultado que tiene algunas partes completamente visibles y otras completamente transparentes:

Pero en el siguiente ejemplo, utilizamos un degradado que tiene un nivel de transparencia diferente. El resultado no sólo es visible o transparente, sino que hay algunas zonas traslúcidas:

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

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

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 queda oculto.

Mientras 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 máscara, los valores de máscara de una máscara de luminancia se calculan a partir de los valores de luminancia y 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 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 a su alrededor. Como puedes ver, las áreas while son completamente visibles:

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

Manifestación

En la siguiente demostración utilizamos una imagen de máscara con áreas transparentes y negras:

La siguiente demostración presenta una máscara de luminancia con un degradado como imagen de máscara:

Nota

La mask-modepropiedad anula la definición de mask-typepropiedad.

Soporte del navegador

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
Todo	Todo	53+	Todo	Todo	Todo

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Todo	83+	Todo	Todo	Todo

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

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

tipo máscara

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

Deja un comentario Cancelar respuesta