Modalità mix-blend - Trucchi CSS

La mix-blend-modeproprietà definisce come il contenuto di un elemento deve fondersi con il suo sfondo. Ad esempio, il testo di un file

potrebbe fondersi con lo sfondo dietro di esso in modi interessanti.

.blend ( mix-blend-mode: exclusion; )

Nell'esempio sopra il contenuto è stato modificato dal in mix-blend-modemodo che i colori del testo siano esclusi dal suo sfondo. Questo è solo uno dei tanti valori per questa proprietà.

Si è verificato un problema con Chrome 58+ in cui mix-blend-modenon verrà eseguito il rendering su elementi impostati su un trasparente . Il numero è stato etichettato come numero 711955 in Chrome, assegnato al momento della stesura di questo documento. Nel frattempo, una soluzione semplice è assegnare un colore di sfondo bianco (o davvero qualsiasi) all'elemento del corpo.

Valori

initial: l'impostazione predefinita della proprietà che non imposta una modalità di fusione.
inherit: un elemento erediterà la modalità di fusione dal suo elemento genitore.
unset: rimuove la modalità di fusione corrente da un elemento.
: questo è l'attributo di uno dei metodi di fusione sottostanti:
normal: questo attributo non applica alcuna fusione.
multiply: l'elemento viene moltiplicato per lo sfondo e sostituisce il colore dello sfondo. Il colore risultante è sempre scuro come lo sfondo.
screen: moltiplica lo sfondo e il contenuto completa il risultato. Ciò si tradurrà in contenuti più luminosi del background-color.
overlay: moltiplica o filtra il contenuto a seconda del colore di sfondo. Questo è l'inverso della modalità di fusione della luce intensa.
scurisci: lo sfondo viene sostituito con il contenuto in cui il contenuto è più scuro, altrimenti viene lasciato com'era.
lighten: lo sfondo viene sostituito con il contenuto in cui il contenuto è più chiaro.
color-dodge: questo attributo schiarisce il colore di sfondo per riflettere il colore del contenuto.
color-burn: scurisce lo sfondo per riflettere il colore naturale del contenuto.
hard-light: a seconda del colore del contenuto questo attributo lo schermerà o lo moltiplicherà.
soft-light: a seconda del colore del contenuto questo lo scurirà o lo schiarirà.
difference: sottrae il più scuro dei due colori dal colore più chiaro.
exclusion: simile a differencema con un contrasto inferiore.
hue: crea un colore con la tonalità del contenuto combinata con la saturazione e la luminosità dello sfondo.
saturation: crea un colore con la saturazione del contenuto combinata con la tonalità e la luminosità dello sfondo.
color: crea un colore con la tonalità e la saturazione del contenuto e la luminosità dello sfondo.
luminosity: crea un colore con la luminosità del contenuto e la tonalità e la saturazione dello sfondo. Questo è l'inverso colordell'attributo.

Vale la pena notare che l'impostazione di una modalità di fusione diversa da normalgenererà un nuovo contesto di impilamento che deve quindi essere miscelato con il contesto di impilamento che contiene l'elemento.

L'effetto di questi valori è mostrato nella demo di seguito:

Maggiori informazioni

Nozioni di base sulle modalità CSS Blend
modalità mix-blend su MDN
modalità mix-blend su W3C
Una raccolta di demo in modalità di fusione CSS
Conoscere le modalità di fusione CSS

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.