Proprietà mask-composite CSS

Pagina precedente mask-clip
Pagina successiva mask-image

Definizione e uso

mask-composite L'attributo specifica l'operazione di composizione utilizzata tra la sovrapposizione corrente e la sovrapposizione sottostante.

Esempio

Mostra mask-composite Valori diversi dell'attributo:

.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;
}

Prova da solo

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
add	La parte situata sopra la sovrapposizione di livello obiettivo.
subtract	La parte situata al di fuori della sovrapposizione di livello sorgente.
intersect	La parte sovrapposta tra la sovrapposizione di livello sorgente e di livello obiettivo sostituisce la sovrapposizione di livello obiettivo.
exclude	L'area non sovrapposta tra la sovrapposizione di livello sorgente e di livello obiettivo viene combinata.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	ErEDITA questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	add
Ereditarietà:	No
Produzione di animazione:	Non supportato. Vedi:Proprietà correlate con l'animazione.
Versione:	Modulo Masking CSS Livello 1
Sintassi JavaScript:	object.style.maskComposite="intersect"