Jak wyświetlać tekst na obrazie w trybie mieszania-mieszania CSS3

Tła obrazu świetnie wyglądają za dużymi tekstami na wyświetlaczu. Jednak jego implementacja CSS nie jest tak prosta. Możemy użyć background-clip: tekst; właściwość, jednak nadal jest to funkcja eksperymentalna bez wystarczającej obsługi przeglądarki.

Alternatywą CSS pokazującą tło obrazu za tekstem jest używając mix-blend-mode własność. Tryby mieszania dla elementów HTML są sprawiedliwie obsługiwane we wszystkich nowoczesnych przeglądarkach stacjonarnych i mobilnych z wyjątkiem kilku, takich jak Internet Explorer.

W tym poście zobaczymy, jak to zrobić mix-blend-mode (w szczególności dwa z jego trybów) działa i jak możesz go użyć wyświetl tekst z tłem obrazu w dwóch przypadkach użycia:

kiedy obraz tła może być widziane przez tekst
kiedy obraz tła biegnie tekst

Zobacz kilka przykładów w poniższej wersji demonstracyjnej (obrazy pochodzą z witryny unsplash.com).

Zobacz tekst pióra z tłem obrazu HONGKIAT (@hkdc) na CodePen.

The mix-blend-mode Właściwość CSS określa, w jaki sposób zawartość i zasłona elementu HTML powinien wymieszać kolorystycznie.

Spójrz na listę trybów mieszania, z których będziemy korzystać zwielokrotniać i ekran w tym poście.

Po pierwsze, spójrzmy, jak działają te dwa specyficzne tryby mieszania.

W jaki sposób `zwielokrotniać` & `ekran` tryby mieszania działają

Tryby mieszania są technicznie funkcjami oblicz ostateczną wartość koloru przy użyciu składników koloru elementu i jego tła.

The `zwielokrotniać` tryb mieszania

w zwielokrotniać tryb mieszania, poszczególne kolory elementów i ich tła są pomnożone, a uzyskany kolor zostanie zastosowany do ostatecznej wersji mieszanej.

The zwielokrotniać tryb mieszania jest obliczany według następującego wzoru:

B (Cb, Cs) = Cb × Cs

gdzie:Cb - Kolor komponentu tłaCs - Składnik koloru elementu źródłowegob - Funkcja mieszania

Gdy Cb i Cs są mnożone, wynikowy kolor jest mieszanką tych dwóch składników koloru i jest tak ciemny jak najciemniejszy z dwóch kolorów.

Aby stworzyć tło obrazu tekstowego, musimy skupić się na przypadku, kiedy Cs (składnik koloru elementu źródłowego) to albo czarny albo biały.

Jeśli Cs jest czarny jego wartość to 0, kolor wyjściowy będzie również czarny, ponieważ Cb × 0 = 0. Tak więc, gdy element jest w kolorze czarnym, to nie ma znaczenia jaki kolor ma tło, wszystko, co widzimy po zmieszaniu, jest czarne.

Jeśli Cs jest biały jego wartość to 1, kolor wyjściowy jest czymkolwiek Cb jest ponieważCb × 1 = Cb. Więc w tym przypadku widzimy tło bezpośrednio tak jak jest.

The `ekran` tryb mieszania

The ekran tryb mieszania działa podobnie jak zwielokrotniać tryb mieszania, ale z odwrotnym skutkiem. Więc, a czarny pierwszy plan pokazuje tło tak jak jest, i a biały pierwszy plan pokazuje biały z dowolnym tłem.

Szybko zobaczmy jego wzór:

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

Gdy Cs jest czarny (0), kolor tła zostanie wyświetlony po mieszaniu, jako:

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

Gdy Cs jest biały (1) wynik będzie biały z dowolnym tłem, ponieważ:

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

1. Obraz wyświetlany przez tekst

Aby wyświetlić tekst pokazujący obraz tła, używamy ekran tryb mieszania z czarny tekst i biała otaczająca przestrzeń.

  woda

 .tło szerokość: 600px; wysokość: 210px; background-image: url (someimage.jpg); rozmiar tła: 100%; margin: auto;  .text color: black; kolor tła: biały; mix-blend-mode: screen; szerokość: 100%; wysokość: 100%; rozmiar czcionki: 160pt; font-weight: bolder; wyrównywanie tekstu: środek; line-height: 210px; margines: 0;

Obecnie nasz tekst wygląda jak poniżej, w następnym kroku dodamy niestandardowy kolor do tła.

Dodawanie koloru

Jak już pewnie odgadłeś, używanie trybów mieszania pozostawia nam tylko dwa wybory kolorów dla obszaru otaczającego tekst - czarny czy biały. jednak z białym, możliwe jest dodanie do niego koloru za pomocą nakładki, jeśli kolor nakładki ładnie pasuje do używanego obrazu.

Aby dodać kolor do otaczającego obszaru, dodaj a

do HTML na nakładkę, i daj to kolor tła o wysokiej przezroczystości. Użyj także mix-blend-mode: pomnóż właściwość nakładki, ponieważ pomaga ona kolorowi tła nakładki mieszać trochę lepiej z obrazem pojawiającym się wewnątrz tekstu.

  woda

 .overlay background-color: rgba (0,255,255, .1); mix-blend-mode: pomnóż; szerokość: 100%; wysokość: 100%; pozycja: absolutna; top: 0;

Dzięki tej technice możemy pokolorować otaczający obszar wokół tekstu tłem obrazu:

Zauważ, że technika działa dobrze tylko z subtelne przezroczyste kolory. Jeśli użyjesz w pełni nieprzezroczystego koloru lub koloru, który nie pasuje do obrazu, obraz pojawiający się wewnątrz tekstu będzie miał bardzo widoczny odcień użytego koloru, więc jeśli nie jest to wygląd, który zamierzasz, unikaj nieprzezroczystych kolorów.

2. Tekst otoczony tłem obrazu

Mimo normalnego umieszczenia tekstu na tle obrazu wymaga tej samej techniki, Pokażę wam przykład tego, jak wygląda powyższe demo, kiedy efekt jest odwrócony, tj. gdy kolor tekstu jest biały, a tło czarne.

 .tekst kolor: biały; kolor tła: czarny; mix-blend-mode: screen; szerokość: 100%; wysokość: 100%; rozmiar czcionki: 160pt; font-weight: bolder; wyrównywanie tekstu: środek; line-height: 210px; margines: 0;

Możesz użyć ta sama nakładka w celu dodania koloru do tekstu, chyba że chcesz zachować biały kolor.

 .overlay background-color: rgba (0,255,255, .1); mix-blend-mode: pomnóż; szerokość: 100%; wysokość: 100%; pozycja: absolutna; top: 0;

Poniżej możesz zobaczyć, jak wygląda odwrotny przypadek:

Zauważ, że w Internet Explorerze lub jakiejkolwiek innej przeglądarce, która nie obsługuje mix-blend-mode właściwość, tło obrazu nie pojawi się, a tekst pozostanie czarny (lub biały).