Kako prikazati besedilo na sliki z načinom mešanja CSS3

Ozadja slike izgledajo za velikimi besedili na zaslonu. Vendar pa njegova izvedba CSS ni tako enostavna. Lahko uporabimo ozadje-posnetek: besedilo; lastnost, vendar je še vedno eksperimentalna funkcija brez zadostne podpore brskalniku.

Alternativa CSS za prikaz slike ozadja za besedilom je uporabljati mix-mešanica-mode nepremičnine. Načini mešanja za elemente HTML so precej podprte v vseh modernih namiznih in mobilnih brskalnikih, razen nekaterih, kot je Internet Explorer.

Na tem mestu bomo videli, kako mix-mešanica-mode (posebej za dva načina) in kako ga lahko uporabite prikaže besedilo s sliko ozadja v dveh primerih uporabe:

1. ko je slika v ozadju je lahko viden skozi besedilo
2. ko je slika v ozadju teče okoli besedilo

Oglejte si nekaj primerov v predstavitvi spodaj (slike so iz unsplash.com).

The mix-mešanica-mode Lastnost CSS določa, kako vsebine in ozadje elementa HTML zmešajte skupaj barvno.

Oglejte si seznam načinov mešanja, iz katerih bomo uporabili pomnožite in na zaslonu na tem mestu.

Najprej poglejmo, kako delujejo ta dva posebna načina mešanja.

Kako pomnožite & na zaslonu načini mešanja delujejo

Načini mešanja so tehnično funkcije izračunajte končno vrednost barve z uporabo barvnih elementov elementa in njegove ozadja.

The pomnožite način mešanja

V pomnožite način mešanja, posamezne barve elementov in njihove ozadja pomnoženo, in nastala barva se uporabi za končno mešano različico.

The pomnožite način mešanja se izračuna po naslednji formuli:

B (Cb, Cs) = Cb × Cs

kje:Cb - Barvna komponenta ozadjaCs - Barvna komponenta izvornega elementaB - Funkcija mešanja

Kdaj Cb in Cs se množijo, dobljena barva je mešanica teh dveh barvnih komponent in je temna kot najtemnejša od obeh barv.

Če želimo ustvariti ozadje besedilne slike, se moramo osredotočiti na primer, ko Cs (barvna komponenta izvornega elementa) je črna ali bela.

Če Cs je Črna njegova vrednost je 0, izhodna barva bo tudi črna, ker Cb × 0 = 0. Torej, ko je element obarvan črno, je ni pomembno, kakšna je barva ozadja, vse, kar lahko vidimo po mešanju, je črno.

Če Cs je bela njegova vrednost je 1, izhodna barva je karkoli Cb je, kerCb × 1 = Cb. V tem primeru vidimo neposredno ozadje kot je.

The na zaslonu način mešanja

The na zaslonu način mešanja deluje podobno kot pomnožite način mešanja, vendar z nasprotnim rezultatom. Torej, a črno ospredje prikazuje ozadje kot je, in a belo ospredje prikazuje belo ne glede na ozadje.

Hitro si oglejmo njegovo formulo:

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

Kdaj Cs je Črna (0), barva ozadja bo prikazana po mešanju, kot:

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

Kdaj Cs je bela (1) rezultat bo bel z vsemi ozadji, kot:

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

1. Slika, prikazana v besedilu

Če želite prikazati besedilo, ki prikazuje njegovo sliko v ozadju, uporabimo na zaslonu način mešanja z črno besedilo in beli prostor.

 
 
Voda
 
 

 .ozadje širina: 600px; višina: 210px; ozadje-slika: url (someimage.jpg); velikost ozadja: 100%; margin: auto;  .text barva: črna; barva ozadja: bela; način mešanja: zaslon; širina: 100%; višina: 100%; velikost pisave: 160pt; font-weight: bolder; text-align: center; line-height: 210px; margin: 0;  

Trenutno je naše besedilo spodaj, v naslednjem koraku pa bomo v ozadje dodali barvo po meri.

Dodajanje barve

Kot ste morda že uganili, lahko z uporabo načina mešanja pustite le dve barvni izbiri za območje, ki obdaja besedilo - črno ali belo. Vendar pa z belo, mogoče mu je dodati nekaj barve s prekrivanjem, če je prekrivna barva se lepo ujema z uporabljeno sliko.

Če želite dodati barvo v okolici, dodajte a

v HTML za prekrivanje, in ji dajte a barva ozadja z visoko preglednostjo. Uporabite tudi mix-blend-mode: pomnožite lastnost za prekrivanje, saj pomaga pri barvi ozadja prekrivanja mešanica nekoliko boljša s sliko, ki se pojavi znotraj besedila.

 
 
Voda
 
 
 

 .prekrivanje barva ozadja: rgba (0,255,255, .1); mix-blend-mode: pomnožite; širina: 100%; višina: 100%; položaj: absolutno; na vrh: 0;  

S to tehniko lahko obarvamo okolico okoli besedila z ozadjem slike:

Upoštevajte, da tehnika dobro deluje samo z subtilne prosojne barve. Če uporabljate popolnoma neprosojno barvo ali barvo, ki se ne ujema s sliko, bo slika, ki se pojavi v besedilu, zelo vidna barva uporabljene barve, tako da, če ne gre za videz, za katerega greste, Izogibajte se motnim barvam.

2. Besedilo, obdano s sliko ozadja

Čeprav je normalna postavitev besedila prek slike ozadja zahteva isto tehniko, Pokazal vam bom primer, kako zgornji demo izgleda, ko učinek je obrnjen, ko je barva besedila bela, ozadje pa črno.

 .besedilo barva: bela; barva ozadja: črna; način mešanja: zaslon; širina: 100%; višina: 100%; velikost pisave: 160pt; font-weight: bolder; text-align: center; line-height: 210px; margin: 0;  

Uporabite lahko enako prekrivanje da bi besedilu dodali barvo, razen če jo želite obdržati belo.

 .prekrivanje barva ozadja: rgba (0,255,255, .1); mix-blend-mode: pomnožite; širina: 100%; višina: 100%; položaj: absolutno; na vrh: 0;  

Spodaj si lahko ogledate, kako izgleda obrnjen primer:

V Internet Explorerju ali katerem koli drugem brskalniku, ki ne podpira mix-mešanica-mode lastnost, se slikovno ozadje ne bo prikazalo, besedilo pa bo ostalo črno (ali belo).