Proprietà mix-blend-mode

La proprietà mix-blend-mode imposta la modalità di fusione del colore sorgente sul colore di sfondo o sull'immagine di sfondo. I valori per la proprietà sono analoghi alle modalità principali dei programmi di grafica.

Sintassi

selettore {
	mix-blend-mode: valori;
}

La tabella presenta i valori principali per la proprietà mix-blend-mode:

Valori

Valore	Descrizione
`normal`	Normale. Non viene utilizzata la fusione dei colori. Modalità predefinita.
`multiply`	Moltiplicazione. In questa modalità il valore del colore primario viene moltiplicato per il valore del colore sovrapposto. Il colore risultante è sempre un colore più scuro.
`screen`	Schermo. In questa modalità vengono moltiplicati i valori inversi del colore primario e del colore sovrapposto. Come colore risultante viene sempre applicato un colore più chiaro.
`overlay`	Sovrapposizione. In questa modalità i colori vengono moltiplicati o schiariti a seconda del colore primario. Motivi o colori sovrappongono i pixel esistenti, lasciando immutate le aree chiare e scure del colore primario.

Esempio

Vediamo come apparirà un'immagine con il valore predefinito della proprietà mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Esempio

Ora cambiamo la modalità di fusione in moltiplicazione:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Esempio

Impostiamo alla proprietà mix-blend-mode il valore sovrapposizione:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Vedi anche

la proprietà background,
che è una proprietà abbreviata per lo sfondo
la proprietà background-image,
con la quale si può assegnare un'immagine di sfondo a un blocco
la proprietà background-blend-mode,
con la quale si può sovrapporre un'immagine di sfondo al colore di sfondo