Sådan viser du tekst på billede med CSS3 mix-mix-mode

Billed baggrunde se godt ud efter store displaytekster. Men dens CSS implementering er ikke så ligetil. Vi kan bruge baggrundsklip: tekst; ejendom, men det er stadig en eksperimentel funktion uden tilstrækkelig browser support.

CSS-alternativet til at vise en billedbakgrund bag en tekst er bruger mix-blend-mode ejendom. Blend modes for HTML elementer understøttes ret på tværs af alle moderne desktop- og mobilbrowsere med undtagelse af nogle få, f.eks. Internet Explorer.

I dette indlæg skal vi se hvordan mix-blend-mode (to af dens tilstande specifikt) virker, og hvordan du kan bruge det til Vis en tekst med billedbakgrund i to brugssager:

1. når baggrundsbilledet kan ses gennem teksten
2. når baggrundsbilledet løber rundt teksten

Se nogle eksempler i demoen nedenfor (billeder er fra unsplash.com).

Det mix-blend-mode CSS-egenskaben definerer, hvordan indhold og kulisse af et HTML-element skal blandes farvevis.

Se på listen over blandingsformer, hvoraf vi vil bruge formere sig og skærm i dette indlæg.

Lad os først se på, hvordan disse to specifikke blandingstilstande fungerer.

Hvordan formere sig & skærm blandingsfunktioner arbejde

Blandingstilstande er teknisk funktionalitet beregne en endelig farveværdi ved hjælp af farvekomponenterne i et element og dets baggrund.

Det formere sig blandingstilstand

I formere sig blandingstilstand, de enkelte farver af elementerne og deres baggrund er ganget, og den resulterende farve påføres den endelige blended version.

Det formere sig blandingstilstand beregnes i henhold til følgende formel:

B (Cb, Cs) = Cb × Cs

hvor:Cb - Farve komponent i baggrundenCs - Farvekomponent i kildeelementetB - Blending funktion

Hvornår Cb og Cs multipliceres, den resulterende farve er en blanding af disse to farvekomponenter og er så mørk som den mørkeste af de to farver.

For at skabe vores tekst billed baggrund, skal vi fokusere på sagen når Cs (farvekomponenten i kildeelementet) er enten sort eller hvid.

Hvis Cs er sort dens værdi er 0, Outputfarven vil også være sort, fordi Cb × 0 = 0. Så, når elementet er farvet sort, det ligegyldigt hvilken farve baggrunden er, alt vi kan se efter blanding er sort.

Hvis Cs er hvid dens værdi er 1, outputfarven er uanset Cb er fordiCb × 1 = Cb. Så i dette tilfælde ser vi baggrunden direkte Som det er.

Det skærm blandingstilstand

Det skærm blend mode fungerer på samme måde som formere sig blandingstilstand, men med det modsatte resultat. Så, a sort forgrundsgrundlag viser baggrunden Som det er, og a hvid forgrundsviden viser hvid uanset baggrund.

Lad os hurtigt se sin formel:

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

Hvornår Cs er sort (0), vil baggrundsfarven blive vist efter blandingen som:

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

Hvornår Cs er hvid (1) resultatet vil være hvidt med enhver baggrund, som:

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

1. Billede vist gennem tekst

For at vise tekst, der viser gennem sit baggrundsbillede, bruger vi skærm blandingstilstand med sort tekst og hvidt omkringliggende rum.

 
 
Vand
 
 

 .baggrund bredde: 600px; højde: 210px; baggrundsbillede: url (someimage.jpg); baggrundsstørrelse: 100%; margen: auto;  .text farve: sort; baggrundsfarve: hvid; mix-blend-mode: skærm; bredde: 100%; højde: 100%; skrifttypestørrelse: 160pt; font-weight: bolder; tekst-align: center; linjens højde: 210px; margen: 0;  

I øjeblikket ser vores tekst ud nedenfor, i næste trin tilføjer vi tilpasset farve til baggrunden.

Tilføjelse af farve

Som du måske har gættet i øjeblikket, skal du ved hjælp af blandingstilstande kun give to farvevalg for det område, der omgiver teksten - sort eller hvid. Imidlertid med hvidt, det er muligt at tilføje noget farve til det ved hjælp af en overlay, hvis overlejringsfarven matcher pænt med det anvendte billede.

For at tilføje farve til det omkringliggende område skal du tilføje en

til HTML'en til en overlejring, og giv det en baggrundsfarve med høj gennemsigtighed. Brug også mix-mix-mode: multiplicere ejendom til overlejringen, da det hjælper baggrundsfarven på overlejret til blande lidt bedre med billedet der vises inden for tekst.

 
 
Vand
 
 
 

 .overlay baggrundsfarve: rgba (0,255,255, .1); mix-mix-mode: multiplicere; bredde: 100%; højde: 100%; position: absolut; top: 0;  

Med denne teknik kunne vi farve det omkringliggende område omkring teksten med billedets baggrund:

Bemærk at teknikken kun fungerer godt med subtile transparente farver. Hvis du bruger en fuldstændig uigennemsigtig farve eller en farve, der ikke stemmer overens med billedet, vil billedet, der vises inde i teksten, have en meget synlig farvefarve af den anvendte farve, så medmindre det er et udseende, du går efter, undgå uigennemsigtige farver.

2. Tekst omgivet af billedbakgrund

Selvom en normal tekstplacering over en billedbakgrund kræver den samme teknik, Jeg vil vise dig et eksempel på hvordan den ovenstående demo ligner, når effekten er omvendt, dvs. når tekstfarven er hvid, og baggrunden er sort.

 .tekst farve: hvid; baggrundsfarve: sort; mix-blend-mode: skærm; bredde: 100%; højde: 100%; skrifttypestørrelse: 160pt; font-weight: bolder; tekst-align: center; linjens højde: 210px; margen: 0;  

Du kan bruge samme overlejring for at tilføje lidt farve til teksten, medmindre du vil beholde den hvid.

 .overlay baggrundsfarve: rgba (0,255,255, .1); mix-mix-mode: multiplicere; bredde: 100%; højde: 100%; position: absolut; top: 0;  

Og nedenfor kan du se, hvordan den omvendte sag ser ud:

Bemærk, at i Internet Explorer eller en anden browser, der ikke understøtter mix-blend-mode Egenskaben, billedbakgrunden vises ikke, og teksten forbliver sort (eller hvid).