Kako prikazati tekst na slici s CSS3 mix-modom

Pozadine slike izgledaju sjajno iza velikih prikaza tekstova. Međutim, njegova implementacija CSS-a nije tako jednostavna. Možemo koristiti pozadina-isječak: tekst; svojstvo, no to je još uvijek eksperimentalna značajka bez dovoljne podrške preglednika.

CSS alternativa za prikaz pozadine slike iza teksta je koristiti mix-mješavina-mod svojstvo. Načini miješanja za HTML elemente prilično su podržani u svim modernim radnim i mobilnim preglednicima, osim nekoliko, kao što je Internet Explorer.

U ovom postu ćemo vidjeti kako mix-mješavina-mod (posebice dva njegova načina rada) i kako ga možete koristiti prikaz teksta s pozadinom slike u dva slučaja upotrebe:

kada je pozadinska slika može se vidjeti kroz tekst
kada je pozadinska slika trči okolo teksta

Pogledajte neke primjere u demonstraciji u nastavku (slike su iz unsplash.com).

Pogledajte tekst olovke s slikom pozadine HONGKIAT (@hkdc) na CodePen.

mix-mješavina-mod CSS svojstvo definira kako sadržaj i pozadina HTML elementa pomiješajte zajedno u boji.

Pogledajte popis načina miješanja, od kojih ćemo koristiti pomnožiti i zaslon u ovom postu.

Prvo, pogledajmo kako ova dva specifična načina rada rade.

Kako `pomnožiti` & `zaslon` modovi miješanja rade

Načini miješanja tehnički su funkcije izračunajte konačnu vrijednost boje koristeći komponente boje elementa i njegovu pozadinu.

`pomnožiti` način miješanja

U pomnožiti način miješanja, pojedinačne boje elemenata i njihove pozadine množe, i rezultirajuća boja se primjenjuje na konačnu izmiješanu verziju.

pomnožiti način miješanja izračunava se prema sljedećoj formuli:

B (Cb, Cs) = Cb × Cs

gdje:cb - Komponenta boje u pozadinics - Komponenta boje izvornog elementaB - Funkcija miješanja

Kada cb i cs se množe, rezultirajuća boja je spoj tih dviju komponenti boje i jest tamna kao najmračnija od dvije boje.

Da bismo stvorili pozadinsku sliku teksta, moramo se usredotočiti na slučaj kada cs (komponenta boje izvornog elementa) je bilo crno ili bijelo.

Ako cs je crno njegova vrijednost je 0, izlazna boja će također biti crna, jer Cb × 0 = 0. Dakle, kada je element obojen crnom bojom, to nije važno koja je boja pozadina, sve što možemo vidjeti nakon miješanja je crno.

Ako cs je bijela njegova vrijednost je 1, izlazna boja je bilo što cb je zatoCb × 1 = Cb. Dakle, u ovom slučaju vidimo pozadinu izravno kakva je.

`zaslon` način miješanja

zaslon način miješanja radi slično kao pomnožiti način miješanja, ali s suprotnim rezultatom. Dakle, a crni prednji plan prikazuje pozadinu kakva je, i a bijelo u prvom planu bez obzira na pozadinu.

Brzo ćemo vidjeti njegovu formulu:

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

Kada cs je crno (0), boja pozadine bit će prikazana nakon miješanja, kao:

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

Kada cs je bijela (1) rezultat će biti bijeli s bilo kojom pozadinom, kao:

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

1. Slika prikazana kroz tekst

Za prikaz teksta koji se prikazuje kroz pozadinsku sliku, koristimo zaslon način miješanja s crni tekst i bijeli okolni prostor.

  Voda

 .pozadina širina: 600px; visina: 210px; pozadina-slika: url (someimage.jpg); veličina pozadine: 100%; margina: auto;  .text boja: crna; boja pozadine: bijela; mix-blend-mode: zaslon; širina: 100%; visina: 100%; veličina fonta: 160pt; font-weight: bolder; poravnavanje teksta: centar; visina linije: 210px; margina: 0;

Trenutno naš tekst izgleda kao u nastavku, au sljedećem koraku dodajemo prilagođenu boju pozadini.

Dodavanje boje

Kao što ste do sada pretpostavili, korištenje načina miješanja ostavlja nam samo dva izbora boja za područje koje okružuje tekst - crno ili bijelo. Međutim s bijelim, moguće je dodati boju pomoću sloja, ako je boja prekrivanja lijepo se podudara s korištenom slikom.

Za dodavanje boje okolini, dodajte a

u HTML za sloj, i dajte mu boja pozadine s visokom transparentnošću. Također upotrijebite mix-blend-mode: pomnožite svojstvo za sloj, jer pomaže pozadinskoj boji sloja pomiješati se malo bolje sa slikom koja se pojavljuje unutar teksta.

  Voda

 .prekrivanje pozadinska boja: rgba (0,255,255, .1); mix-blend-mode: pomnožite; širina: 100%; visina: 100%; položaj: apsolutni; na vrh: 0;

Ovom tehnikom možemo obojiti okolno područje oko teksta pozadinom slike:

Imajte na umu da tehnika dobro radi samo s suptilne transparentne boje. Ako upotrebljavate potpuno neprozirnu boju ili boju koja se ne podudara s slikom, slika koja se pojavljuje u tekstu imat će vrlo vidljivu boju korištene boje, tako da ako to nije izgled koji tražite, izbjegavajte neprozirne boje.

2. Tekst okružen pozadinom slike

Iako je uobičajeni položaj teksta iznad pozadine slike zahtijeva istu tehniku, Pokazat ću vam primjer kako gore navedeni demo izgleda kad učinak je obrnut, tj. kada je boja teksta bijela, a pozadina crna.

 .tekst boja: bijela; boja pozadine: crna; mix-blend-mode: zaslon; širina: 100%; visina: 100%; veličina fonta: 160pt; font-weight: bolder; poravnavanje teksta: centar; visina linije: 210px; margina: 0;

Možete upotrijebiti isti sloj da biste dodali boju tekstu, osim ako ga želite zadržati bijelim.

 .prekrivanje pozadinska boja: rgba (0,255,255, .1); mix-blend-mode: pomnožite; širina: 100%; visina: 100%; položaj: apsolutni; na vrh: 0;

U nastavku možete vidjeti kako izgleda obrnuti slučaj:

Imajte na umu da u Internet Exploreru ili bilo kojem drugom pregledniku koji ne podržava mix-mješavina-mod svojstvo, pozadina slike neće se pojaviti, a tekst će ostati crn (ili bijeli).