Kaip rodyti tekstą vaizde Su CSS3 mišinio mišinio režimu

Vaizdo fonai puikiai atrodo už didelių ekrano tekstų. Tačiau jos CSS įgyvendinimas nėra toks paprastas. Mes galime naudoti fono klipas: tekstas; nuosavybė, tačiau ji vis dar yra eksperimentinė funkcija be pakankamos naršyklės palaikymo.

CSS alternatyva, rodanti atvaizdo foną už teksto naudojant mišinio mišinio režimas nuosavybė. HTML elementų derinimo režimai visose šiuolaikinėse darbalaukio ir mobiliojo ryšio naršyklėse, išskyrus kelias, pvz., „Internet Explorer“, yra teisingai palaikomos.

Šiame pranešime mes pamatysime, kaip mišinio mišinio režimas (būtent du jo režimai) veikia ir kaip galite jį naudoti rodyti tekstą su fone dviem atvejais:

1. kai fono vaizdas gali būti pamatytas per tekstą
2. kai fono vaizdas eina aplink tekstas

Žiūrėkite žemiau pateiktus demo pavyzdžius (vaizdai pateikiami iš unsplash.com).

The mišinio mišinio režimas CSS savybė apibrėžia, kaip turinys ir fonas HTML elemento sumaišykite spalvingai.

Pažvelkite į maišymo režimų sąrašą, iš kurio mes naudosime daugintis ir ekranas šiame pranešime.

Pirma, pažvelkime, kaip veikia šie du specifiniai mišinio režimai.

Kaip daugintis & ekranas mišinio režimai

Maišymo režimai techniškai yra funkcijos apskaičiuoti galutinę spalvą naudojant elemento spalvų komponentus ir jo foną.

The daugintis mišinio režimu

Viduje konors daugintis mišinio režimas, yra atskiros elementų spalvos ir jų fonai dauginama, ir gauta spalva taikoma galutinei sumaišytai versijai.

The daugintis mišinio režimas apskaičiuojamas pagal šią formulę:

B (Cb, Cs) = Cb × Cs

kur:Cb - Fono spalvos komponentasCs - Šaltinio elemento spalvinis komponentasB - Maišymo funkcija

Kada Cb ir Cs padauginama, gaunama spalva yra šių dviejų spalvų komponentų mišinys ir yra kaip tamsiausias kaip dviejų spalvų tamsiausias.

Kad sukurtume teksto atvaizdo foną, turime sutelkti dėmesį į atvejį, kada Cs (šaltinio elemento spalvos komponentas) arba juoda arba balta.

Jei Cs yra juoda jos vertė yra 0, išvesties spalva taip pat bus juoda, nes Cb × 0 = 0. Taigi, kai elementas yra juodos spalvos, jis nesvarbu, kokia spalva yra fone, viskas, ką matome po maišymo, yra juoda.

Jei Cs yra balta jos vertė yra 1, išvesties spalva yra bet kokia Cb yra, nesCb × 1 = Cb. Taigi šiuo atveju mes matome foną tiesiogiai taip kaip yra.

The ekranas mišinio režimu

The ekranas mišinio režimas veikia panašiai kaip daugintis mišinio režimas, bet su priešingu rezultatu. Taigi, a juodos spalvos rodo foną taip kaip yra, ir a baltos spalvos su bet kokia fone.

Leiskite greitai pamatyti jo formulę:

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

Kada Cs yra juoda (0), fono spalva bus rodoma po maišymo, kaip:

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

Kada Cs yra balta (1) rezultatas bus baltas su bet kuria fone, kaip:

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

1. Vaizdas rodomas per tekstą

Norėdami rodyti tekstą, rodantį jo fono paveikslėlį, mes naudojame ekranas mišinio režimu su juodas tekstas ir balta aplinkinė erdvė.

 
 
Vanduo
 
 

 .fonas plotis: 600px; aukštis: 210 px; fono paveikslėlis: url (someimage.jpg); fono dydis: 100%; marža: auto;  .text color: black; fono spalva: balta; mix-mix-mode: ekranas; plotis: 100%; aukštis: 100%; šrifto dydis: 160pt; šrifto svoris: drąsesnis; teksto derinimas: centras; linijos aukštis: 210px; marža: 0;  

Šiuo metu mūsų tekstas atrodo žemiau, kitame etape mes pridėsime fono spalvą.

Spalvų pridėjimas

Kaip dabar galėjote atspėti, naudojant mišinio režimus paliekate tik du spalvų pasirinkimus toje srityje, kuri supa tekstą - juoda arba balta. Tačiau su baltu, galima įdėti tam tikrą spalvą naudojant perdangą, jei perdangos spalva puikiai atitinka naudojamą vaizdą.

Jei norite pridėti spalvą į apylinkes, pridėkite a

į HTML už perdangą, ir duokite jai fono spalva su dideliu skaidrumu. Taip pat naudokite mix-blend-mode: dauginti perdanga, nes ji padeda perdangos fono spalvai šiek tiek geriau susilieja su vaizdu, esančiu vidiniame tekste.

 
 
Vanduo
 
 
 

 .perdanga fono spalva: rgba (0,255,255, .1); mix-mix-mode: dauginti; plotis: 100%; aukštis: 100%; pozicija: absoliutus; viršuje: 0;  

Naudodamiesi šiuo metodu, aplink tekstą galėtume nudažyti aplinkinį vaizdą fone:

Atkreipkite dėmesį, kad technika veikia tik su subtilios skaidrios spalvos. Jei naudojate visiškai neskaidrią spalvą arba spalvą, neatitinkančią vaizdo, teksto viduje rodomas vaizdas turės labai matomą spalvos atspalvį, taigi, nebent tai atrodo, išvengti nepermatomų spalvų.

2. Tekstas, apsuptas vaizdo fono

Nors įprastas teksto išdėstymas virš vaizdo fono reikia to paties metodo, Aš jums parodysiu, kaip atrodo, kaip minėta demonstracija atrodo poveikis yra pakeistas, t. y. kai teksto spalva yra balta ir fonas yra juodas.

 .tekstas spalva: balta; fono spalva: juoda; mix-mix-mode: ekranas; plotis: 100%; aukštis: 100%; šrifto dydis: 160pt; šrifto svoris: drąsesnis; teksto derinimas: centras; linijos aukštis: 210px; marža: 0;  

Galite naudoti tas pats perdanga norėdami pridėti teksto spalvą, nebent norite, kad jis būtų baltas.

 .perdanga fono spalva: rgba (0,255,255, .1); mix-mix-mode: dauginti; plotis: 100%; aukštis: 100%; pozicija: absoliutus; viršuje: 0;  

Ir toliau galite pamatyti, kaip atrodo atvirkštinis atvejis:

Atkreipkite dėmesį, kad „Internet Explorer“ arba bet kurioje kitoje naršyklėje, kuri nepalaiko mišinio mišinio režimas nuosavybė, vaizdo fonas nebus rodomas ir tekstas išliks juodas (arba baltas).