Як відобразити текст на зображенні за допомогою CSS3 mix-blend-mode

Фонові зображення відмінно виглядають за великими текстами дисплея. Проте його реалізація CSS не так проста. Ми можемо використовувати background-clip: текст; властивість, однак це ще одна експериментальна функція без достатньої підтримки браузера.

Альтернатива CSS для показу фону зображення за текстом за допомогою mix-blend-mode власності. Режими суміщення для елементів HTML достатньо підтримуються у всіх сучасних веб-переглядачах для робочого столу та мобільних пристроях, за винятком декількох, наприклад, Internet Explorer.

На цій посаді ми побачимо, як це зробити mix-blend-mode (спеціально два його режими) працює, і як ви можете використовувати його відображення тексту з фоном зображення у двох випадках:

1. коли фонове зображення можна побачити через текст
2. коли фонове зображення біжить текст

Нижче наведено приклади демонстрації (зображення з сайту unsplash.com).

The mix-blend-mode Властивість CSS визначає як зміст і тлі елемента HTML змішайте разом.

Подивіться на список режимів накладання, з яких ми будемо використовувати помножити і екрану у цій публікації.

По-перше, давайте подивимося, як працюють ці два специфічні режими накладання.

Як помножити & екрану режими накладання працюють

Режими накладання є технічними функціями обчислити кінцеве значення кольору використання кольорових компонентів елемента та його фонового зображення.

The помножити режим накладання

В помножити Режим накладання, індивідуальні кольори елементів і їх фони помножити, і отриманий колір застосовується до останньої змішаної версії.

The помножити Режим накладання обчислюється за такою формулою:

B (Cb, Cs) = Cb × Cs

де:Cb - Кольорова складова на тліCs - Кольорова складова вихідного елементаB - Функція накладання

Коли Cb і Cs розмножуються, отриманий колір є сумішшю цих двох колірних компонентів і є темний, як самий темний з двох кольорів.

Щоб створити наше фонове зображення тексту, ми повинні зосередитися на випадку, коли Cs (колірний компонент вихідного елемента) або чорний, або білий.

Якщо Cs є чорний його значення 0, вихідний колір також буде чорний, тому що Cb × 0 = 0. Отже, коли елемент забарвлений в чорний колір, він не має значення, який колірний фон є, все, що ми бачимо після змішування, є чорним.

Якщо Cs є білий його значення 1, вихідний колір є будь-яким Cb є, тому щоCb × 1 = Cb. Отже, в цьому випадку ми бачимо фон прямо так як є.

The екрану режим накладання

The екрану Режим накладання працює аналогічно помножити режим накладання, але з протилежним результатом. Отже, a чорний переднього плану показує фон так як є, а білий передній план показує білий з будь-яким фоном.

Давайте швидко побачимо його формулу:

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

Коли Cs є чорний (0), колір фону буде показано після змішування, як:

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

Коли Cs є білий (1) результат буде білим з будь-якого фону, як:

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

1. Зображення показано через текст

Для відображення тексту, що відображається через його фонове зображення, ми використовуємо екрану режим накладання с чорний текст і білий навколишній простір.

 
 
Вода
 
 

 .фон width: 600px; висота: 210px; фон-зображення: url (someimage.jpg); розмір фону: 100%; margin: auto;  .text колір: чорний; колір фону: білий; mix-blend-режим: екран; ширина: 100%; висота: 100%; розмір шрифту: 160pt; font-weight: bolder; text-align: center; висота рядка: 210px; маржа: 0;  

Наразі наш текст виглядає нижче, на наступному етапі ми додамо колір фону до фону.

Додавання кольору

Як ви вже здогадалися, використання режимів накладання залишає нам лише два кольори для області, яка оточує текст - Чорне чи біле. Однак з білим, можна додати до нього певний колір за допомогою накладання, якщо колір накладення добре відповідає використаному зображенню.

Щоб додати колір до навколишньої області, додайте a

до HTML для накладання, і дати йому колір тла з високою прозорістю. Також використовуйте mix-blend-mode: множення властивість для накладання, оскільки це допомагає кольору фону накладання суміш трохи краще із зображенням, що з'являється всередині тексту.

 
 
Вода
 
 
 

 .накладення фоновий колір: rgba (0,255,255, .1); mix-blend-режим: множення; ширина: 100%; висота: 100%; позиція: абсолютна; зверху: 0;  

За допомогою цієї техніки ми можемо пофарбувати навколишню область навколо тексту фоном зображення:

Зауважимо, що техніка добре працює тільки з тонкі прозорі кольори. Якщо ви використовуєте повністю непрозорий колір або колір, який не збігається з зображенням, зображення, що з'являється в тексті, матиме дуже помітний відтінок використовуваного кольору, тому, якщо це не вигляд, уникайте непрозорих кольорів.

2. Текст, оточений фоном зображення

Навіть при нормальному розміщенні тексту на фоні зображення вимагає тієї ж методики, Я покажу вам приклад того, як вищезгадана демонстрація виглядає, коли ефект зворотний, тобто, коли колір тексту білий, а фон чорний.

 .текст колір: білий; фоновий колір: чорний; mix-blend-режим: екран; ширина: 100%; висота: 100%; розмір шрифту: 160pt; font-weight: bolder; text-align: center; висота рядка: 210px; маржа: 0;  

Ви можете використовувати таке ж накладання щоб додати деякий колір тексту, якщо ви не хочете, щоб він був білим.

 .накладення фоновий колір: rgba (0,255,255, .1); mix-blend-режим: множення; ширина: 100%; висота: 100%; позиція: абсолютна; зверху: 0;  

Нижче ви можете побачити, як виглядає зворотний випадок:

Зверніть увагу, що в Internet Explorer або в будь-якому іншому браузері, який не підтримує mix-blend-mode властивість, фон зображення не з'явиться, а текст залишатиметься чорним (або білим).