Jak zobrazit text na obrázku S režimem CSS3 mix-blend

Obrázek pozadí Vypadají skvěle za velkými texty. Jeho implementace CSS však není tak přímočará. Můžeme použít pozadí-klip: text; vlastnost, ale je to stále experimentální funkce bez dostatečné podpory prohlížeče.

CSS alternativa k zobrazení pozadí obrázku za textem za použití režim mix-blend vlastnictví. Režimy prolnutí pro prvky HTML jsou spravedlivě podporovány ve všech moderních desktopových a mobilních prohlížečích s výjimkou několika málo, jako je Internet Explorer.

V tomto příspěvku uvidíme, jak režim mix-blend (dva z jeho režimů) funguje a jak jej můžete použít zobrazit text s pozadím obrázku ve dvou případech použití:

obrázek na pozadí může být viděn prostřednictvím textu
obrázek na pozadí pobíhá text

Podívejte se na některé příklady v ukázce níže (obrázky jsou z webu unsplash.com).

Viz Text pera s obrázkem na pozadí od HONGKIAT (@hkdc) na CodePen.

režim mix-blend Vlastnost CSS definuje, jak obsah a pozadí elementu HTML smíchejte barevně.

Podívejte se na seznam režimů prolnutí, z nichž budeme používat násobit a obrazovka v tomto příspěvku.

Nejprve se podívejme na to, jak tyto dva specifické režimy prolnutí fungují.

Jak `násobit` & `obrazovka` režimy prolnutí

Režimy prolnutí jsou technicky funkce vypočítat konečnou hodnotu barvy použití barevných složek prvku a jeho pozadí.

`násobit` režim prolnutí

V násobit režim prolnutí, jednotlivé barvy prvků a jejich pozadí jsou násobil, a výsledná barva se aplikuje na finální smíšenou verzi.

násobit režim míchání se vypočítá podle následujícího vzorce:

B (Cb, Cs) = Cb × Cs

kde:Cb - Barevná složka pozadíCs - Barevná složka zdrojového prvkuB - Funkce míchání

Když Cb a Cs jsou násobeny, výsledná barva je směsí těchto dvou barevných složek a je tma jako nejtmavší ze dvou barev.

Chcete-li vytvořit náš textový obraz pozadí, musíme se zaměřit na případ, kdy Cs (složka barvy zdrojového prvku) je černá nebo bílá.

Li Cs je Černá jeho hodnota je 0, výstupní barva bude také černá, protože Cb × 0 = 0. Takže když je prvek zbarven černě, je to nezáleží na tom, jakou barvu má pozadí, vše, co můžeme vidět po smíchání, je černé.

Li Cs je bílý jeho hodnota je 1, výstupní barva je cokoliv Cb je ProtožeCb × 1 = Cb. Takže v tomto případě vidíme pozadí přímo jak je.

`obrazovka` režim prolnutí

obrazovka režim prolnutí funguje podobně jako režim násobit režim prolnutí, ale s opačným výsledkem. Takže, a černé popředí ukazuje pozadí jak je, a bílé popředí ukazuje bílá s jakýmkoliv pozadím.

Podívejme se rychle na jeho vzorec:

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

Když Cs je Černá (0), barva pozadí se zobrazí po prolnutí jako:

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

Když Cs je bílý (1) výsledek bude bílý s libovolným pozadím, jako:

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

1. Obrázek zobrazen prostřednictvím textu

Chcete-li zobrazit text zobrazený na pozadí, použijeme obrazovka režim prolnutí s černý text a bílý okolní prostor.

  Voda

 .backdrop width: 600px; výška: 210px; background-image: url (someimage.jpg); velikost pozadí: 100%; okraj: auto;  .text barva: černá; barva pozadí: bílá; mix-blend-mode: obrazovka; šířka: 100%; výška: 100%; velikost písma: 160pt; font-weight: odvážnější; zarovnání textu: střed; výška řádku: 210px; marže: 0;

V současné době vypadá náš text níže, v dalším kroku přidáme do pozadí vlastní barvu.

Přidání barvy

Jak jste nyní mohli odhadnout, použití režimů prolnutí nám ponechává pouze dvě možnosti barev pro oblast, která text obklopuje - Černá nebo bílá. nicméně s bílou, je možné do něj přidat nějakou barvu pomocí překrytí, je-li překrytí barvy pěkně odpovídá použitému obrazu.

Chcete-li přidat barvu do okolí, přidejte

do HTML pro překrytí, a dát to barva pozadí s vysokou průhledností. Použijte také mix-blend-mode: násobit vlastnost překrytí, protože pomáhá barvě pozadí překrytí lepší směs s obrázkem uvnitř textu.

  Voda

 .overlay background-color: rgba (0,255,255, .1); mix-blend-mode: násobit; šířka: 100%; výška: 100%; pozice: absolutní; nahoru: 0;

S touto technikou bychom mohli obarvit okolní plochu kolem textu na pozadí obrázku:

Všimněte si, že technika funguje dobře pouze s jemné průhledné barvy. Pokud použijete zcela neprůhlednou barvu nebo barvu, která neodpovídá obrazu, bude mít obrázek zobrazený uvnitř textu velmi viditelný odstín použité barvy., vyhnout se neprůhledným barvám.

2. Text obklopený obrazovým pozadím

I když je normální umístění textu na pozadí obrázku vyžaduje stejnou techniku, Ukážu vám příklad toho, jak vypadá výše uvedené demo, když efekt je obrácen, když je barva textu bílá a pozadí je černé.

 .text barva: bílá; barva pozadí: černá; mix-blend-mode: obrazovka; šířka: 100%; výška: 100%; velikost písma: 160pt; font-weight: odvážnější; zarovnání textu: střed; výška řádku: 210px; marže: 0;

Můžete použít stejné překrytí aby se do textu přidala nějaká barva, pokud nechcete, aby byla bílá.

 .overlay background-color: rgba (0,255,255, .1); mix-blend-mode: násobit; šířka: 100%; výška: 100%; pozice: absolutní; nahoru: 0;

Níže vidíte, jak vypadá opačný případ:

Všimněte si, že v Internet Exploreru nebo jiném prohlížeči, který nepodporuje režim mix-blend na pozadí se obrázek nezobrazí a text zůstane černý (nebo bílý).