Slik viser du tekst på bilde Med CSS3 mix-blend-modus

Bilde bakgrunner se bra ut etter store displaytekster. Men CSS-implementeringen er ikke så grei. Vi kan bruke bakgrunnsbilder: tekst; eiendom, men det er fortsatt en eksperimentell funksjon uten tilstrekkelig nettleserstøtte.

CSS-alternativet for å vise en bildebakgrunn bak en tekst er bruker mix-blanding-modus eiendom. Blendmodusene for HTML-elementer støttes ganske enkelt på tvers av alle moderne desktop- og mobilnettlesere med unntak av noen få, for eksempel Internet Explorer.

I dette innlegget skal vi se hvordan mix-blanding-modus (to av dens moduser spesifikt) fungerer, og hvordan du kan bruke den til Vis en tekst med bildebakgrunn i to brukstilfeller:

1. når bakgrunnsbildet kan bli sett gjennom teksten
2. når bakgrunnsbildet løper rundt teksten

Se noen eksempler i demoen under (bilder er fra unsplash.com).

De mix-blanding-modus CSS-egenskapen definerer hvordan innhold og bakteppe av et HTML-element skal bland sammen fargegjennom.

Ta en titt på listen over blandemoduser, hvorav vi skal bruke multiplisere og skjerm i dette innlegget.

Først må vi se nærmere på hvordan disse to spesifikke blandingsmodusene fungerer.

Hvordan multiplisere & skjerm blandingsmodus arbeid

Blendingmodusene er teknisk funn som beregne en sluttfargeverdi bruker fargekomponentene til et element og dets bakgrunn.

De multiplisere blandingsmodus

I multiplisere blandingsmodus, de enkelte fargene til elementene og deres bakgrunner er multiplisert, og den resulterende fargen påføres den endelige blandede versjonen.

De multiplisere blandingsmodus beregnes i henhold til følgende formel:

B (Cb, Cs) = Cb × Cs

hvor:cb - Fargekomponent av bakgrunnencs - Fargekomponent av kildeelementetB - Blandingsfunksjon

Når cb og cs blir multiplisert, den resulterende fargen er en blanding av disse to fargekomponentene, og er så mørk som den mørkeste av de to farger.

For å lage vår tekstbildebakgrunn må vi fokusere på saken når cs (fargekomponenten til kildeelementet) er enten svart eller hvitt.

Hvis cs er svart dens verdi er 0, Utgangsfarge vil også være svart, fordi Cb × 0 = 0. Så, når elementet er farget svart, det spiller ingen rolle hvilken farge bakgrunnen er, alt vi kan se etter blanding er svart.

Hvis cs er hvit dens verdi er 1, utdatafarge er hva som helst cb er fordiCb × 1 = Cb. Så i dette tilfellet ser vi bakteppet direkte som det er.

De skjerm blandingsmodus

De skjerm blandingsmodus fungerer på samme måte som multiplisere blandingsmodus, men med motsatt resultat. Så, a svart forgrunn viser bakgrunnen som det er, og a hvit forgrunnen viser hvitt med uansett bakteppe.

La oss raskt se sin formel:

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

Når cs er svart (0), vil bakgrunnsfargen bli vist etter blanding, som:

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

Når cs er hvit (1) Resultatet vil være hvitt med noe bakteppe, som:

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

1. Bilde vist gjennom tekst

For å vise tekst som viser gjennom bakgrunnsbildet, bruker vi skjerm blandingsmodus med svart tekst og hvitt omgivende rom.

 
 
Vann
 
 

 .bakteppe bredde: 600px; høyde: 210px; bakgrunnsbilde: url (someimage.jpg); bakgrunnsstørrelse: 100%; margin: auto;  .text color: black; bakgrunnsfarge: hvit; mix-blend-modus: skjerm; bredde: 100%; høyde: 100%; skriftstørrelse: 160pt; font-weight: bolder; tekstjustering: center; linjehøyde: 210px; margin: 0;  

For øyeblikket ser vår tekst ut som nedenfor, i neste trinn legger vi til tilpasset farge i bakgrunnen.

Legge til farge

Som du kanskje har gjettet nå, bruker vi blandingsmodus oss bare to fargevalg for området som omgir teksten - svart eller hvit. derimot med hvitt, det er mulig å legge til litt farge på den bruker et overlegg, hvis overleggsfarge passer godt sammen med bildet som brukes.

For å legge til farge i det omkringliggende området, legg til en

til HTML for et overlegg, og gi den en bakgrunnsfarge med høy gjennomsiktighet. Bruk også mix-blend-modus: multiplisere Egenskapen for overlegget, da det hjelper bakgrunnsfargen til overlegget til bland litt bedre med bildet som vises i tekst.

 
 
Vann
 
 
 

 .overlegg bakgrunnsfarge: rgba (0,255,255, .1); mix-blend-modus: multiplisere; bredde: 100%; høyde: 100%; posisjon: absolutt; topp: 0;  

Med denne teknikken kan vi fargelegge omgivelsene rundt teksten med bildebakgrunnen:

Legg merke til at teknikken fungerer bra bare med subtile transparente farger. Hvis du bruker en helt ugjennomsiktig farge eller en farge som ikke samsvarer med bildet, vil bildet som vises i teksten, ha en veldig synlig tone av fargen som brukes, så med mindre det er et blikk du går for, unngå ugjennomsiktige farger.

2. Tekst omgitt av bildebakgrunn

Selv om en vanlig tekstplassering over et bildebakgrunn krever samme teknikk, Jeg skal vise deg et eksempel på hvordan den ovenfor viste demo ser ut når effekten er reversert, dvs. når tekstfargen er hvit og bakgrunnen er svart.

 .tekst farge: hvit; bakgrunnsfarge: svart; mix-blend-modus: skjerm; bredde: 100%; høyde: 100%; skriftstørrelse: 160pt; font-weight: bolder; tekstjustering: center; linjehøyde: 210px; margin: 0;  

Du kan bruke samme overlegg for å legge til litt farge i teksten, med mindre du vil beholde den hvit.

 .overlegg bakgrunnsfarge: rgba (0,255,255, .1); mix-blend-modus: multiplisere; bredde: 100%; høyde: 100%; posisjon: absolutt; topp: 0;  

Og under kan du se hvordan omvendt tilfelle ser ut som:

Legg merke til at i Internet Explorer, eller en annen nettleser som ikke støtter mix-blanding-modus eiendom, vil bildet bakgrunn ikke vises, og teksten forblir svart (eller hvit).