Ako zobraziť text na obrázku S režimom mix-blend CSS3

Pozadie obrázkov Vyzerajte skvelo za veľkými textami displeja. Jeho implementácia CSS však nie je taká jednoduchá. Môžeme použiť klip na pozadí: text; majetok, je to však experimentálna funkcia bez dostatočnej podpory prehliadača.

CSS alternatívou pre zobrazenie pozadia obrazu za textom je pomocou mix-zmes-mode vlastnosť. Režimy zlúčenia pre prvky HTML sú spravodlivo podporované vo všetkých moderných desktopových a mobilných prehliadačoch s výnimkou niekoľkých, napríklad Internet Explorer.

V tomto príspevku uvidíme ako mix-zmes-mode (dva zo svojich režimov) a ako to môžete použiť zobraziť text s pozadím obrázka v dvoch prípadoch použitia:

keď obrázok pozadia moze byt videny prostredníctvom textu
keď obrázok pozadia beží okolo textu

Pozrite si niekoľko príkladov v demo nižšie (obrázky sú z unsplash.com).

Pozrite sa na text pera s obrázkom pozadia HONGKIAT (@ hkdc) na CodePen.

mix-zmes-mode Vlastnosť CSS definuje ako obsah a pozadia prvku HTML zmiešajte dohromady farbu.

Pozrite sa na zoznam režimov miešania, z ktorých budeme používať násobiť a plátno v tomto príspevku.

Po prvé, pozrime sa, ako fungujú tieto dva spôsoby miešania.

ako `násobiť` & `plátno` režimy miešania fungujú

Miešacie režimy sú technicky funkčné vypočítajte konečnú hodnotu farby pomocou farebných komponentov prvku a jeho pozadia.

`násobiť` blend mode

V násobiť blend mode, jednotlivé farby prvkov a ich pozadia sú násobí, a výsledná farba sa aplikuje na finálnu zmiešanú verziu.

násobiť Režim miešania sa vypočíta podľa tohto vzorca:

B (Cb, Cs) = Cb x Cs

kde:cb - Farebná zložka pozadiask - Farebná zložka zdrojového prvkuB - Miešacia funkcia

Kedy cb a sk sú vynásobené, výsledná farba je zmes týchto dvoch farebných zložiek a je tak tmavá ako najtmavšia z dvoch farieb.

Ak chcete vytvoriť naše pozadie s textovým obrázkom, musíme sa sústrediť na prípad, kedy sk (farebná zložka zdrojového prvku) je čiernobiely alebo biely.

ak sk je čierna jeho hodnota je 0, výstupná farba bude tiež čierna, pretože Cb × 0 = 0. Takže, keď je prvok farebný čierny, je to nezáleží na tom, akú farbu pozadie je, všetko, čo vidíme po zmiešaní, je čierne.

ak sk je biely jeho hodnota je 1, výstupná farba je akékoľvek cb je PretožeCb × 1 = Cb. Takže v tomto prípade priamo vidíme pozadie ako to je.

`plátno` blend mode

plátno blend mode funguje podobne ako násobiť režim miešania, ale s opačným výsledkom. Takže a čierne popredie zobrazuje pozadie ako to je, a a biele popredie ukazuje biele s akýmkoľvek pozadím.

Pozrime sa rýchlo na jeho vzorec:

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

Kedy sk je čierna (0) sa po zmiešaní zobrazí farba pozadia ako:

Cb + 0 - (Cb x 0) = Cb + 0 - 0 = Cb

Kedy sk je biely (1) výsledok bude biela s ľubovoľným pozadím ako:

Cb + 1 - (Cbxl) = Cb + 1 - Cb = 1

1. Obrázok zobrazený prostredníctvom textu

Ak chcete zobraziť text zobrazujúci sa prostredníctvom jeho pozadia, použijeme plátno blend mode s čierny text a biely obklopujúci priestor.

  voda

 .pozadie šírka: 600 pixlov; výška: 210px; pozadie-obrázok: url (someimage.jpg); veľkosť pozadia: 100%; marža: auto;  .text farba: čierna; farba pozadia: biela; mix-blend-mode: obrazovka; šírka: 100%; výška: 100%; veľkosť písma: 160pt; veľkosť písma: odvážnejšia; text-align: center; line-height: 210px; rozpätie: 0;

V súčasnosti náš text vyzerá nižšie, v ďalšom kroku pridáme vlastné farby na pozadí.

Pridávanie farieb

Ako ste už mohli hádať, používanie kombinovaných režimov nám umožňuje len dve voľby farby pre oblasť, ktorá obklopuje text - čierny alebo biely. však s bielym, je možné pridať nejaké farby na to pomocou prekrytia, ak je farba prekrytia pekne sa zhoduje s použitým obrázkom.

Ak chcete pridať farbu do okolia, pridajte položku a

do kódu HTML pre prekrytie, a daj mu to farba pozadia s vysokou transparentnosťou. Použite tiež mix-blend-mode: násobenie Vlastnosť pre prekrytie, pretože pomáha farbe pozadia prekrytia zmes trochu lepšie s obrázkom zobrazeným vo vnútri textu.

  voda

 .prekrytie farba pozadia: rgba (0,255,255, .1); mix-blend-mode: násobenie; šírka: 100%; výška: 100%; poloha: absolútna; top: 0;

S touto technikou by sme mohli sfarbiť okolie okolo textu s pozadím obrazu:

Všimnite si, že technika funguje dobre len s jemné transparentné farby. Ak použijete úplne nepriehľadnú farbu alebo farbu, ktorá sa nezhoduje s obrázkom, obrázok zobrazený v texte bude mať veľmi dobre viditeľný odtieň od použitej farby, takže pokiaľ to nie je vzhľad, na ktorý ide, vyhnite sa nepriehľadným farbám.

2. Text obklopený pozadím obrázka

Hoci normálne umiestnenie textu na pozadí pozadia vyžaduje rovnakú techniku, Chcem vám ukázať príklad toho, ako vyššie vyzerá demo ako keď efekt je obrátený, keď je farba textu biela a pozadie je čierna.

 .text farba: biela; farba pozadia: čierna; mix-blend-mode: obrazovka; šírka: 100%; výška: 100%; veľkosť písma: 160pt; veľkosť písma: odvážnejšia; text-align: center; line-height: 210px; rozpätie: 0;

Môžete použiť rovnaké prekrytie aby ste pridali nejakú farbu do textu, ak nechcete, aby bol biely.

 .prekrytie farba pozadia: rgba (0,255,255, .1); mix-blend-mode: násobenie; šírka: 100%; výška: 100%; poloha: absolútna; top: 0;

A nižšie môžete vidieť, ako vypadá reverzný prípad:

Všimnite si, že v programe Internet Explorer alebo inom prehliadači, ktorý nepodporuje mix-zmes-mode vlastníctva, pozadie obrázka sa nezobrazí a text zostane čierny (alebo biely).