Kuidas kuvada teksti pildil CSS3 segamis-segamisrežiimis

Pildi taust tundub suurte ekraanitekstide taha. Selle CSS-i rakendamine ei ole siiski nii lihtne. Me saame seda kasutada tausta-klipp: tekst; Omadus, kuid see on endiselt katseline funktsioon ilma piisava brauseri toeta.

CSS-i alternatiiv, mis näitab pildi tausta teksti taga kasutades mix-blend-mode vara. HTML-elementide segamisrežiimid on kõikides kaasaegsetes töölaua- ja mobiilibrauserites õigesti toetatud, välja arvatud mõned, näiteks Internet Explorer.

Selles postituses näeme, kuidas mix-blend-mode (kaks konkreetset režiimi) töötab ja kuidas seda kasutada kuvab pildi taustaga teksti kahel juhul:

1. kui taustapilt võib näha teksti kaudu
2. kui taustapilt jookseb ringi teksti

Vaadake mõningaid näiteid allpool olevast demost (pildid on esitatud aadressilt unsplash.com).

The mix-blend-mode CSS-i omadus määrab, kuidas sisu ja taust HTML-element peaks olema segatakse kokku värviliselt.

Vaadake segamisrežiimide loendit, millest me kasutame korrutada ja ekraanil selles postituses.

Kõigepealt uurime, kuidas need kaks konkreetset segamisrežiimi töötavad.

Kuidas korrutada & ekraanil segamisrežiimid töötavad

Segamisrežiimid on tehniliselt funktsioonid arvutada lõplik värviväärtus kasutades elemendi värvikomponente ja selle tausta.

The korrutada segamisrežiimis

In korrutada segamisrežiimis on elementide ja nende taustade individuaalsed värvid korrutatud, ja saadud värvi rakendatakse lõplikule segatud versioonile.

The korrutada segamisrežiim arvutatakse järgmise valemiga:

B (Cb, Cs) = Cb × Cs

kus:Cb - Taustapildi värvikomponentCs - Allika elemendi värvikomponentB - Segamisfunktsioon

Millal Cb ja Cs korrutatakse, saadud värv on nende kahe värvikomponendi segu ja on sama tumedad kui kahe värvi tumedam.

Teksti taustapildi loomiseks peame keskenduma juhtumile, millal Cs (lähtekomponendi värvikomponent) on kas must või valge.

Kui Cs on must selle väärtus on 0, väljundvärv on ka must, sest Cb × 0 = 0. Niisiis, kui element on must, on see ei ole oluline, mis värvi taust on, kõik, mida näeme pärast segamist, on must.

Kui Cs on valge selle väärtus on 1, väljundvärv on mis tahes Cb on, sestCb × 1 = Cb. Niisiis näeme sellisel juhul otse tausta nagu see on.

The ekraanil segamisrežiimis

The ekraanil segu režiim töötab sarnaselt korrutada segamisrežiimis, kuid vastupidise tulemusega. Niisiis, a must esiplaan näitab tausta nagu see on, ja a valge esiplaan näitab valget mis tahes taustaga.

Vaatame kiiresti selle valemit:

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

Millal Cs on must (0) kuvatakse taustavärv pärast segamist, nagu:

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

Millal Cs on valge (1) tulemus on valge taustaga, nagu:

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

1. Pilt kuvatakse teksti kaudu

Taustapildi kaudu kuvatava teksti kuvamiseks kasutame ekraanil segamisrežiimis koos must tekst ja valge ümbritsev ruum.

 
 
Vesi
 
 

 .taust laius: 600 px; kõrgus: 210 px; taustapilt: url (someimage.jpg); tausta suurus: 100%; marginaal: auto;  .tekst värv: must; taustavärv: valge; mix-blend-mode: ekraan; laius: 100%; kõrgus: 100%; fondi suurus: 160pt; font-weight: bold; teksti joondamine: keskus; rea kõrgus: 210 px; varu: 0;  

Praegu näeb meie tekst allpool olevat, järgmises etapis lisame taustale kohandatud värvi.

Värvi lisamine

Nagu juba praegu arvasite, jätavad segu segamisrežiimid meile ainult kaks värvitooni teksti ümbritsevale piirkonnale - must või valge. Kuid valge, sellele on võimalik lisada värvi kasutades ülekatet, kui kattevärv sobib hästi kasutatud pildiga.

Värvuse lisamiseks ümbritsevale alale lisage a

HTML-i ülekatte jaoks, ja anna talle a taustavärv kõrge läbipaistvusega. Kasutage ka mix-blend-mode: korruta ülekatte omadus, kuna see aitab kattekihi taustavärvile seguneb veidi paremaks pildi sees tekstis.

 
 
Vesi
 
 
 

 .ülekate taustavärv: rgba (0,255,255, .1); mix-blend-mode: korrutada; laius: 100%; kõrgus: 100%; positsioon: absoluutne; top: 0;  

Selle tehnikaga saame värvida ümbritsevat ala teksti ümber pildi taustaga:

Pange tähele, et tehnika töötab ainult koos peened läbipaistvad värvid. Kui kasutate täielikult läbipaistmatut värvi või värvi, mis ei vasta pildile, on teksti sees ilmuval kujutisel kasutatud värvi väga nähtav toon, nii et kui see ei ole välimus, mida te kasutate, vältida läbipaistmatuid värve.

2. Tekst, mida ümbritseb pildi taust

Kuigi tavaline tekstipaigutus pildi taustal nõuab sama tehnikat, Näitan teile näite sellest, kuidas ülaltoodud demo näeb välja kui mõju on vastupidine, see tähendab, kui teksti värv on valge ja taust on must.

 .tekst värv: valge; taustavärv: must; mix-blend-mode: ekraan; laius: 100%; kõrgus: 100%; fondi suurus: 160pt; font-weight: bold; teksti joondamine: keskus; rea kõrgus: 210 px; varu: 0;  

Võite kasutada sama ülekate värvi lisamiseks tekstile, kui te ei soovi seda valge.

 .ülekate taustavärv: rgba (0,255,255, .1); mix-blend-mode: korrutada; laius: 100%; kõrgus: 100%; positsioon: absoluutne; top: 0;  

Ja allpool näete, kuidas vastupidine juhtum näeb välja:

Pange tähele, et Internet Exploreris või mõnes muus brauseris, mis seda ei toeta mix-blend-mode atribuut, pilti taust ei ilmu ja tekst jääb musta (või valge).