Atributo mask-composite de CSS

Definición y uso

mask-composite El atributo especifica la operación de合成 utilizada por la capa de máscara actual y la capa de máscara inferior.

Ejemplo

Exhibición mask-composite Diferentes valores del atributo:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

Intente usted mismo

Sintaxis de CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Valor del atributo

Valor Descripción
add La capa de máscara de origen colocada sobre la capa de máscara de destino.
subtract La parte de la capa de máscara de origen colocada fuera de la capa de máscara de destino.
intersect La parte superpuesta de la capa de máscara de origen reemplaza la capa de máscara de destino.
exclude La región no superpuesta de la capa de máscara de origen y la capa de máscara de destino se combinan.
initial Establezca este atributo en su valor predeterminado. Véase initial.
inherit Hereda este atributo del elemento padre. Véase inherit.

Detalles técnicos

Valor predeterminado: add
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de Máscaras CSS Nivel 1
Sintaxis de JavaScript: object.style.maskComposite="intersect"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero admite esta propiedad.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Páginas relacionadas

Tutoriales:Ocultamiento CSS

Referencia:Atributo mask de CSS

Referencia:Atributo mask-clip de CSS

Referencia:Atributo mask-image de CSS

Referencia:Atributo mask-mode de CSS

Referencia:Atributo mask-origin de CSS

Referencia:Atributo mask-position de CSS

Referencia:Atributo mask-repeat de CSS

Referencia:Atributo mask-size de CSS

Referencia:Atributo mask-type de CSS