Come visualizzare il testo sull’immagine con CSS3 modalità mix-blend

Tempo di lettura: 4 minuti

Gli sfondi delle immagini hanno un bell’aspetto dietro grandi testi di visualizzazione. Tuttavia, la sua implementazione CSS non è così semplice. Siamo in grado di utilizzare la proprietà background-clip: text; tuttavia è ancora una funzionalità sperimentale senza supporto sufficiente del browser.

L’alternativa CSS per mostrare uno sfondo di immagine dietro un testo è usando la proprietà mix-blend-mode. Le modalità di fusione per gli elementi HTML sono abbastanza supportate su tutti i browser desktop e mobili moderni, ad eccezione di alcuni, come Internet Explorer.

In questo post, vedremo come mix-blend-mode(due delle sue modalità in particolare) funziona e come puoi usarlo per visualizzare un testo con sfondo di immagine in due casi d’uso:

1. quando l’immagine di sfondo può essere vista attraverso il testo
2. quando l’immagine di sfondo scorre attorno al testo

Vedi alcuni esempi nella demo di seguito (le immagini provengono da unsplash.com).La mix-blend-modeproprietà CSS definisce come il contenuto e lo sfondo di un elemento HTML debbano fondersi in modo colorato .

La proprietà CSS mix-blend-mode definisce come il contenuto e lo sfondo di un elemento HTML debbano fondersi in modo colorato .

Dai un’occhiata all’elenco dei metodi di fusione , di cui utilizzeremo multiplye screenin questo post.

Innanzitutto, esaminiamo come funzionano queste due modalità di fusione specifiche.

I metodi di fusione tecnicamente sono funzioni che calcolano un valore di colore finale usando i componenti di colore di un elemento e il suo sfondo.

La modalità di fusione  multiply

Nella modalità di fusione multiply i singoli colori degli elementi e i loro fondali vengono moltiplicati e il colore risultante viene applicato alla versione finale miscelata.

La modalità di fusione multiply viene calcolata secondo la seguente formula :

B(Cb, Cs) = Cb × Cs

dove: Cb– Componente colore dello sfondo Cs– Componente colore dell’elemento sorgente B– Funzione di fusione

Quando Cbe Csvengono moltiplicati, il colore risultante è una miscela di questi due componenti di colore ed è più scuro del più scuro dei due colori .

Per creare il nostro sfondo dell’immagine di testo, dobbiamo concentrarci sul caso in cui Cs(il componente colore dell’elemento sorgente) è bianco o nero .

Se Csè nero il suo valore è 0, anche il colore di output sarà nero, perché Cb × 0 = 0. Quindi, quando l’elemento è di colore nero, non importa di che colore sia lo sfondo , tutto ciò che possiamo vedere dopo la fusione è nero.

Se Csè bianco il suo valore è 1, il colore di output è quello che è Cbperché Cb × 1 = Cb. Quindi in questo caso vediamo lo sfondo direttamente così com’è .

La modalità di fusione screen

La modalità di fusione screen funziona in modo simile alla modalità di fusione multiply ma con il risultato opposto . Quindi, un primo piano nero mostra lo sfondo così com’è , e un primo piano bianco mostra il bianco con qualunque sfondo.

Vediamo rapidamente la sua formula :

B(Cb, Cs) = Cb + Cs - (Cb × Cs)

Quando Csè nero (0), il colore di sfondo verrà mostrato dopo la fusione, come:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Quando Csè bianco (1) il risultato sarà bianco con qualsiasi sfondo, come:

Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1

Per visualizzare il testo che mostra l’immagine di sfondo, utilizziamo la modalità di fusione screen con testo nero e spazio bianco circostante .

Attualmente il nostro testo è simile al seguente, nel prossimo passaggio aggiungeremo un colore personalizzato allo sfondo.

Aggiungere colore

Come avrai intuito, usare le modalità di fusione ci lascia solo due scelte di colore per l’area che circonda il testo: bianco o nero . Tuttavia, con il bianco , è possibile aggiungere un po ‘di colore usando una sovrapposizione , se il colore della sovrapposizione si adatta bene all’immagine utilizzata .

Per aggiungere colore all’area circostante, aggiungi <div>a HTML per un overlay e dagli un colore di sfondo con elevata trasparenza . Usa anche la proprietà per l’overlay mix-blend-mode: multiply, poiché aiuta il colore di sfondo dell’overlay a fondersi meglio con l’immagine che appare all’interno del testo.

Con questa tecnica, potremmo colorare l’area circostante attorno al testo con lo sfondo dell’immagine:

Si noti che la tecnica funziona bene solo con sottili colori trasparenti. Se usi un colore completamente opaco o un colore che non corrisponde all’immagine, l’immagine che appare all’interno del testo avrà una tinta molto visibile del colore usato, quindi a meno che non sia un aspetto che stai cercando, evita colori opachi .

2. Testo circondato dallo sfondo dell’immagine

Anche se un normale posizionamento del testo su uno sfondo di immagine richiede la stessa tecnica , ti mostrerò un esempio di come appare la demo sopra quando l’ effetto è invertito , cioè quando il colore del testo è bianco e lo sfondo è nero.

È possibile utilizzare lo stesso overlay per aggiungere un po ‘di colore al testo, a meno che non si desideri mantenerlo bianco.

E sotto puoi vedere come appare il retro:

Si noti che in Internet Explorer o in qualsiasi altro browser che non supporta la proprietà mix-blend-mode, lo sfondo dell’immagine non verrà visualizzato e il testo rimarrà nero (o bianco).