compuesto de máscara

La mask-compositepropiedad CSS nos permite combinar una imagen de capa de máscara con las capas de máscara debajo de ella.

.element {  mask-composite: subtract;}

Cuando hay varias imágenes de capas de máscara, es necesario combinarlas en una capa de máscara final. mask-compositeespecifica cómo se combinan las capas de máscara con diferentes formas en una sola imagen. Piense en ello como combinar capas en una aplicación de edición de imágenes, como Photoshop, Figma o Sketch, donde tiene controles que establecen cómo se combinan las capas.

O, otra forma de pensarlo:

Sintaxis

mask-composite: compositing-operator#wherecompositing-operator = add | subtract | intersect | exclude

• Inicial: add
• Se aplica a: Todos los elementos. En SVG, se aplica a los elementos contenedores sin el defselemento y a todos los elementos gráficos.
• Heredado: no
• Valor calculado: según lo especificado
• Tipo de animación: discreta

Valores

/* Keyword values */mask-composite: add;mask-composite: subtract;mask-composite: intersect;mask-composite: exclude;/* Global values */mask-composite: inherit;mask-composite: initial;mask-composite: unset;

Para la composición, la imagen de la capa de máscara a la que mask-compositese aplica el valor es el origen , mientras que todas las capas de máscara debajo de ella son el destino .

• add: El valor predeterminado. La capa de imagen de máscara más cercana al usuario (origen) se coloca encima de la siguiente capa de imagen de máscara (destino). La combinación es la capa de máscara final.
• subtract: La capa de imagen de máscara más cercana al usuario se coloca donde queda fuera de la siguiente capa de imagen de máscara. En otras palabras, la combinación final son partes del destino que no se superponen al origen.
• intersect: Las partes del origen que se superponen al destino reemplazan el destino. En otras palabras, la combinación final son partes del destino que se superponen al origen.
• exclude: Se combinan las regiones de origen y destino que no se superponen.
• initial: Aplica el valor predeterminado de la propiedad, add.
• inherit: Adopta el mask-compositevalor del padre.
• unset: Elimina la corriente mask-compositedel elemento.

Ejemplo

En el siguiente ejemplo, se combinan dos capas de imagen de máscara utilizando excludeel valor:

img {  mask-image: url(circle.svg), url(plus.svg);  mask-size: 150px, 200px;  mask-position: center;  mask-composite: exclude;} 

Al momento de escribir este artículo, este ejemplo solo funciona en Firefox.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para la composición de máscaras y el número de valores es un valor menor que el número de imágenes de máscara especificadas mediante mask-image.

En el siguiente ejemplo:

• el primer valor especifica la operación compuesta de la segunda imagen con la tercera, y
• el segundo valor se utiliza para realizar la operación compuesta de la primera imagen de máscara con el resultado obtenido de la primera operación.

Y así sucesivamente para cualquier número de imágenes de capas de máscara. Recuerde, la primera imagen especificada se coloca encima de las especificadas después.

.element {  mask-image: url(circle.png), url(star.png), url(square.png);  mask-composite: exclude, subtract;}

Soporte del navegador

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	No *	53+	No	No	No

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
No	87+	No	No	No

* Edge 18 era compatible mask-compositeantes de adoptar el motor de renderizado Blink.

Más información

Recorte y enmascaramiento en CSS

Chris Coyier

Enmascaramiento versus recorte: cuándo usar cada uno

Sara Drasner

33: Recorte y enmascaramiento

Chris Coyier

#185: Jugar con máscaras CSS

Chris Coyier

Composición de máscaras: el curso intensivo

Ana Tudor

Efecto de fragmentación de imágenes con máscaras CSS y propiedades personalizadas

Temani Afif

Relacionado

clip de máscara

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

compuesto de máscara

.element { mask-composite: subtract; } Mojtaba Seyedi

imagen-mascara

.element { mask-image: url(star.svg); } máscara imagen-de-mascara 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

tipo máscara

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