Come visualizzare il testo sull'immagine Con la modalità mix-mix CSS3
Sfondi immagine sembra grande dietro ai grandi testi del display. Tuttavia, la sua implementazione CSS non è così semplice. Possiamo usare il clip di sfondo: testo; proprietà, tuttavia è ancora una funzionalità sperimentale senza un supporto browser sufficiente.
L'alternativa CSS per mostrare un'immagine dietro a un testo è usando il mix-mix-mode proprietà. Modalità di fusione per elementi HTML sono abbastanza supportati su tutti i moderni browser desktop e mobili con l'eccezione di alcuni, come Internet Explorer.
In questo post, vedremo come mix-mix-mode (in particolare due dei suoi modi) funziona e come puoi usarlo visualizza un testo con lo sfondo dell'immagine in due casi d'uso:
- quando l'immagine di sfondo si può vedere attraverso il testo
- quando l'immagine di sfondo corre intorno il testo
Guarda alcuni esempi nella demo qui sotto (le immagini provengono da unsplash.com).
Il mix-mix-mode La proprietà CSS definisce come soddisfare e il fondale di un elemento HTML dovrebbe sfumare insieme colorwise.
Dai un'occhiata alla lista delle modalità di fusione, da cui useremo moltiplicare e schermo in questo post.
Per prima cosa, esaminiamo come funzionano queste due modalità di fusione specifiche.
Come moltiplicare & schermo le modalità di fusione funzionano
Le modalità di fusione tecnicamente sono funzioni che calcola un valore di colore finale usando i componenti di colore di un elemento e il suo fondale.
Il moltiplicare modalità di fusione
Nel moltiplicare modalità di fusione, i singoli colori degli elementi e dei loro fondali sono moltiplicata, e il colore risultante viene applicato alla versione finale miscelata.
Il moltiplicare la modalità di fusione viene calcolata in base alla seguente formula:
B (Cb, Cs) = Cb × Cs
dove:Cb - Componente cromatica dello sfondocs - Componente colore dell'elemento sorgenteB - Funzione di fusione
quando Cb e cs sono moltiplicati, il colore risultante è una miscela di questi due componenti di colore, ed è buio come il 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) è o nero o bianco.
Se cs è nero il suo valore è 0, anche il colore di output sarà nero, perché Cb × 0 = 0. Quindi, quando l'elemento è colorato di nero, lo fa non importa di che colore è lo sfondo, tutto ciò che possiamo vedere dopo la fusione è nero.
Se cs è bianca il suo valore è 1, il colore di uscita è qualunque Cb è perchéCb × 1 = Cb. Quindi in questo caso vediamo direttamente lo sfondo così com'è.
Il schermo modalità di fusione
Il schermo la modalità di fusione funziona in modo simile a moltiplicare modalità di fusione, ma con il risultato opposto. Quindi, a primo piano nero mostra lo sfondo così com'è, e a il primo piano bianco mostra il bianco con qualsiasi fondale.
Vediamo rapidamente la sua formula:
B (Cb, Cs) = Cb + Cs - (Cb × Cs)
quando cs è nero (0), il colore dello sfondo verrà mostrato dopo la fusione, come:
Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb
quando cs è bianca (1) il risultato sarà bianco con qualsiasi sfondo, come:
Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1
1. Immagine mostrata attraverso il testo
Per visualizzare il testo che mostra attraverso la sua immagine di sfondo, usiamo il schermo modalità di fusione con testo nero e spazio bianco circostante.
acqua
.backdrop width: 600px; altezza: 210px; background-image: url (someimage.jpg); dimensione dello sfondo: 100%; margine: auto; .text color: black; colore di sfondo: bianco; mix-blend-mode: schermo; larghezza: 100%; altezza: 100%; font-size: 160pt; font-weight: bolder; allineamento del testo: centro; altezza della linea: 210 px; margine: 0;
Attualmente il nostro testo appare come di seguito, nel prossimo passaggio aggiungeremo un colore personalizzato allo sfondo.
Aggiungere colore
Come avrete già intuito, l'uso delle modalità di fusione ci lascia solo due scelte di colori per l'area che circonda il testo - nero o bianco. però con il bianco, è possibile aggiungere un po 'di colore ad esso utilizzando una sovrapposizione, se il colore di sovrapposizione si adatta bene all'immagine utilizzata.
Per aggiungere colore all'area circostante, aggiungere a acqua Con questa tecnica, possiamo colorare l'area circostante intorno al testo con lo sfondo dell'immagine: Si noti che la tecnica funziona bene solo con colori trasparenti sottili. Se si utilizza un colore completamente opaco o un colore che non corrisponde all'immagine, l'immagine che appare all'interno del testo avrà una tonalità molto visibile del colore utilizzato, quindi a meno che non si tratti di un aspetto che si sta cercando, evitare colori opachi. 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 il l'effetto è invertito, vale a dire quando il colore del testo è bianco e lo sfondo è nero. Puoi usare il 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 caso inverso: Si noti che in Internet Explorer o in qualsiasi altro browser che non supporta il mix-blend-mode: moltiplica proprietà per l'overlay, in quanto aiuta il colore di sfondo della sovrapposizione a un po 'meglio con l'immagine che appare all'interno del testo.
.overlay background-color: rgba (0,255,255, .1); mix-blend-mode: moltiplica; larghezza: 100%; altezza: 100%; posizione: assoluta; inizio: 0;
2. Testo circondato da sfondo dell'immagine
.testo colore: bianco; colore di sfondo: nero; mix-blend-mode: schermo; larghezza: 100%; altezza: 100%; font-size: 160pt; font-weight: bolder; allineamento del testo: centro; altezza della linea: 210 px; margine: 0;
.overlay background-color: rgba (0,255,255, .1); mix-blend-mode: moltiplica; larghezza: 100%; altezza: 100%; posizione: assoluta; inizio: 0;
mix-mix-mode proprietà, lo sfondo dell'immagine non verrà visualizzato e il testo rimarrà nero (o bianco).
