Proprietà background-blend-mode

La proprietà background-blend-mode imposta la modalità di fusione dell'immagine di sfondo con il colore di sfondo o altre immagini. In questa proprietà è possibile specificare anche diversi valori separati da virgola, che verranno applicati nello stesso ordine. I valori per la proprietà sono analoghi alle modalità principali dei programmi di grafica.

Sintassi

selettore {
	background-blend-mode: modalità;
}

Nella tabella sono presentati i valori principali per la proprietà background-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 di base 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 di base 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 di base. Motivi o colori sovrappongono i pixel esistenti, lasciando immutate le aree chiare e scure del colore di base.

Esempio

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

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Ora cambiamo il valore della proprietà background-blend-mode in moltiplicazione:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Esempio

Impostiamo per la nostra immagine la modalità schermo:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedi anche

la proprietà background,
che rappresenta una proprietà abbreviata per lo sfondo
la proprietà background-image,
con la quale è possibile impostare un'immagine di sfondo per un blocco
la proprietà mix-blend-mode,
con la quale è possibile sovrapporre i colori sorgenti all'immagine di sfondo
la proprietà backdrop-filter,
che consente di applicare filtri