Background-blend-mode - Trucchi CSS

La background-blend-modeproprietà definisce come un elemento background-imagedeve fondersi con il suo background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Vedi Pen background-blend-mode di CSS-Tricks (@ css-tricks) su CodePen.

Nella demo sopra, l'impostazione predefinita background-imagea sinistra non ha una modalità di fusione impostata e quindi l'immagine si sovrappone al file background-color. A destra, tuttavia, la modalità di fusione ha modificato il background-imagecon il rosso background-colorsotto. Ma si noti che il colore del testo non è stato influenzato da questa proprietà aggiuntiva.

Valori

initial: il valore predefinito senza miscelazione.
inherit: eredita la modalità di fusione dell'elemento genitore.
: un valore che cambierà l'immagine di sfondo a seconda del suo colore di sfondo.

Il valore può essere impostato come uno dei seguenti (nelle demo sotto background-colorè rosso):

`luminosity`: la luminosità del colore di superficie viene preservata utilizzando la saturazione e la tonalità del colore di fondo.

Demo

Ecco un esempio funzionante di come questi valori vengono interpretati a seconda di background-color:

Vedi la modalità di fusione dello sfondo della penna di CSS-Tricks (@ css-tricks) su CodePen.

Concatenamento di più modalità di fusione

Ogni livello di sfondo può avere solo una singola modalità di fusione, tuttavia se utilizziamo più gradienti lineari, ad esempio, ognuno di essi può avere la propria modalità di fusione che rende la visualizzazione interessante:

Vedi Pen Gradients e background-blend-mode di CSS-Tricks (@ css-tricks) su CodePen.

Ciò si ottiene elencando questi valori in ordine del livello di sfondo che desideri applicare:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Il primo gradiente lineare ha la screenmodalità di fusione, seguito dal secondo gradiente lineare che ha differencee dalla prima immagine di sfondo che gli è stata lightenapplicata.