CSS propriedade mask-composite

Página anterior mask-clip
Próxima página mask-image

Definição e uso

mask-composite O atributo especifica a operação de composição usada pela camada de máscara atual e pela camada de máscara inferior.

Exemplo

Exibição mask-composite Valores diferentes do 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;
}

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor	Descrição
add	A camada de máscara de origem colocada sobre a camada de máscara de destino.
subtract	A parte da camada de máscara de origem colocada fora da camada de máscara de destino.
intersect	A parte sobreposta da camada de máscara de origem substitui a camada de máscara de destino.
exclude	A área não sobreposta da camada de máscara de origem e da camada de máscara de destino é mesclada.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	add
Herança:	Não
Produção de animação:	Não suportado. Veja:Propriedades relacionadas a animação.
Versão:	Módulo de Masking do CSS Nível 1
Sintaxe do JavaScript:	object.style.maskComposite="intersect"