Proprieta background-blend-mode.

La proprietà background-blend-mode rapresenta il metodo di fusione(sovraposizionamento) di livelli che formano lo sfondo si bassa su un algoritmo che determina il meccanismo di interazione tra i pixel di ogni livello. Come si sa un elemento html puo avere più di una immagine o gradien come sfondo. Il numero di livelli è determinato dal numero di valori separati da virgole nella proprietà background-image. Se per un elemento sono impostati più livelli di sfondo, il primo livello del elenco verrà considerato e aplicato come livello superiore.

div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9), url(http://ioeweb.it/images/pale-image.jpg); /* In questo esempio, vedremo solo lo sfondo gradient e non vedremo immagine sotto */
}

Proprieta background-blend-mode rende livello superiore (attivo) semitrasparente, permettendo a livelli  sottostanti essere visibili attraverso di esso. Requisito obbligatorio è che di livelli di sfondo deve essere almeno due:

div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9), url(http://ioeweb.it/images/pale-image.jpg);
background-blend-mode: overlay;
}

Se il primo livello avra l'immagine, il risultato finale per il    nostro metodo scelto per sovraposizione sarà diverso.

div {
width: 300px;
height: 400px;
background-image: url(http://ioeweb.it/images/image.jpg), linear-gradient(45deg, #f8a261, #6e9fc9), ;
background-blend-mode: overlay;
}

Se per un elemento sono  impostati  più di due livelli di fondo, si può impostare diversi metodi di fusione, separati da virgole.

div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9), linear-gradient(135deg, #08526b, #fbcd7c), url(http://ioeweb.it/images/pale-image.jpg);
background-blend-mode: overlay, color;/* metodi applicati*/
}

La proprietà background-blend-mode può essere applicata a qualsiasi elemento HTML non si puo animarla , e non si eredita.

1. Tipi di modalita  di fusione

Ciascun metodo utilizza calcoli matematici, che sono calcolati nel range da 0 a 1, dove 0 corrisponde al colore nero, 1 - bianco. Tutti i metodi di fusione possono essere suddivisi nei seguenti gruppi:

1) Modalità normale - normal;
2) Modalità di contrasto - overlay, soft-light, hard-light ;
3) Modalità di regolazione - darken, multiply, color-burn ;
4) Modalità di schiarimento - lighten, screen, color-dodge ;
5) Modalità di confronto - difference, exclusion ;
6)Altre modalita - hue, saturation, color, luminosity .

 

background-blend-mode
normal Il valore predefinito che indica l'assenza di miscelazione, poiché lo strato superiore rimane opaco.
overlay  Esso utilizza metodo di fusione screen per pixel più chiari, e il metodo di fusione multily per pixel scuri. Poiché il metodo funziona nella fascia media delle due modalità, mezzitoni (50% grigio) diventano trasparenti.
soft-light Metodo luce soffusa. Questo metodo utilizza una combinazione di metodo screen aplicato a pixel più chiari, e il metodo multily di fusione per pixel scuri. Effeto prodotto simile alla precedente, ma dà un effetto più morbido naturale. Mezzitoni anche qui diventano trasparenti.
hard-light Metodo di luce rigida. I colori vengono moltiplicati o illuminati, a seconda della fonte della luce. L'effetto è simile alla proiezione della luce molto chiara sullo sfondo. Mezzitoni anche qui diventano trasparenti.
darken Metodo di oscuramento. Se i pixel del livello superiore più scuri di livellio sotostante, essi rimangono intatti. Se i pixel nello strato superiore sono piu chiari, vengono sostituiti dai pixel più scuri del livello inferiore, per cio con questo metodo rimangono salvati i toni scuri di tutti gli livelli.
multiply Metodo di moltiplicazione. Lavora moltiplicando i pixel di luminosità di livello superiore con pixel di livelli sottostanti. Va benisimo per la creazione di ombre, per rimuovere i colori chiari (pur mantenendo il colore più scuro). Moltiplicare qualsiasi colore per nero dàra nero. Moltiplicando qualsiasi colore per bianco manterrà il colore originale.
color-burn Metodo brucia base. Sostituisce i colori invertendoli, oscurando livello superiore, senza cambiare i colori (bianci)chiari.
lighten Metodo schiarire. Scuri pixel strato superiore vengono sostituiti con i pixel più chiari dei livelli sottostanti. I pixel luminosi non vengono sostituiti.
screen Metodo schermo. Effeto analogico a lighten con diferenza che elimina piu pixel scuri creando un passagio piu morbido. Funziona come il metodo multiply, ma elimina i toni scuri.
color-dodge Metodo schiarimento del base. Rende colori chiari ancora piu chiari. Le zone scure del disegno rimangono come prima.
difference Metodo di difrenza.Visualizza differenza tonale tra i due livelli, rimuovendo pixel bianchi dal livello. L'immagine risultante è scura e opposta come tono al immagine iniziale. Fa inversione selettivo, in cui i colori chiari sono invertiti in scuri e piu densi e colori scuri rimangono invariati..
exclusion Metodo di eclusione. Confronta pixel del livello attivo e il pixel equivalente del livello sottostante confrontando la loro luminosità, rendendo inversione selettiva. Il nero non è mai invertito, bianco - sempre. Stessi colori vengono compensati uno l'altro, dando alla fine un colore grigio.
hue Metodo di tonalità del colore. Salva il tono del livello attivo, e aggiunge ad esso la luminosità e la saturazione di livelli sottostanti (come risultato si otiene l'immagine del livello inferiore con colori del livello superiore)..
saturation Metodo diu saturazione. Crea un colore con la saturazione del colore originale e la tonalità e la luminosità del colore di livello sottostante. Toni grigi rimangono intatti.
color La modalità colore. Crea un colore con la tonalità e la saturazione del colore originale e la luminosità del colore di sfondo sottostante. Salva i toni di grigio di livelli sottostanti.
luminosity Controllo della luminosità. Crea un colore con la luminosità del colore originale e la tonalità e saturazione del colore di livello sottostante. L'effeto è opposto al effeto color.

background blend mode

Esempi pratici di utilizzo di metodi di fusione

1. L'effetto della tela

div {
width: 366px;
height: 334px;
background-image: url(http://ioeweb.it/images/css/css3blend/background63.jpg), url(http://ioeweb.it/images/css/css3blend/blend-mode_donna.jpg);
background-blend-mode: color-burn;
}

2. L'effetto retro.

div {
width: 366px;
height: 334px;
background-image: url(http://ioeweb.i/immage/romantika.jpg), radial-gradient(rgba(255,255,255,.3) 20px, transparent 20px);
background-size: 100% 100%, 60px 60px;
background-position:0 0, 5px 5px;
background-blend-mode: hard-light;
}

3. L'effeto rete.

div {
width: 366px;
height: 334px;
background-image: url(http://ioeweb.it/romantika.jpg), radial-gradient(black 1px, transparent 1px);
background-size: 100% 100%, 4px 4px;
background-blend-mode: darken;
}

Letto 431 volte