Как отобразить текст на изображении с помощью CSS3 mix-blend-mode

Фоны изображений отлично смотрятся за большими текстами. Однако его реализация CSS не так проста. Мы можем использовать фон-клип: текст; свойство, однако это все еще экспериментальная функция без достаточной поддержки браузера.

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

В этом посте мы увидим, как микс-смесь-режим (два из его режимов конкретно) работает, и как вы можете использовать его для отобразить текст с фоновым изображением в двух случаях использования:

когда фоновое изображение можно увидеть через текст
когда фоновое изображение бегает текст

Смотрите некоторые примеры в демоверсии ниже (изображения с unsplash.com).

Посмотрите текст пера с фоном изображения HONGKIAT (@hkdc) на CodePen.

микс-смесь-режим Свойство CSS определяет, как содержание и фон HTML-элемент должен смешивать цвета.

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

Во-первых, давайте посмотрим, как работают эти два конкретных режима наложения.

Как `умножать` & `экран` смешанные режимы работы

Режимы смешивания технически являются функциями, которые рассчитать окончательное значение цвета используя цветовые компоненты элемента и его фон.

`умножать` режим смешивания

в умножать Режим смешивания, отдельные цвета элементов и их фонов умноженная, и полученный цвет применяется к окончательному смешанному варианту.

умножать Режим наложения рассчитывается по следующей формуле:

B (Cb, Cs) = Cb × Cs

где:центибар - Цветовая составляющая фонаCs - Цветовая составляющая исходного элементаВ - Функция смешивания

когда центибар а также Cs умножаются, результирующий цвет представляет собой смесь этих двух цветовых компонентов, и темный, как самый темный из двух цветов.

Чтобы создать фоновое изображение текста, нам нужно сосредоточиться на том случае, когда Cs (цветовой компонент исходного элемента) либо черный, либо белый.

Если Cs является черный его ценность 0, выходной цвет также будет черным, потому что Cb × 0 = 0. Итак, когда элемент окрашен в черный цвет, он не имеет значения, какого цвета фон, все, что мы можем увидеть после смешивания - это черное.

Если Cs является белый его ценность 1, выходной цвет любой центибар это потому чтоCb × 1 = Cb. Так что в этом случае мы видим фон непосредственно как есть.

`экран` режим смешивания

экран Режим наложения работает аналогично умножать режим наложения, но с противоположным результатом. Итак, черный передний план показывает фон как есть, и белый передний план показывает белый с любым фоном.

Давайте быстро увидим его формулу:

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. Изображение показывается через текст

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

  вода

 .фон ширина: 600 пикселей; высота: 210px; background-image: url (someimage.jpg); размер фона: 100%; наценка: авто;  .text цвет: черный; цвет фона: белый; режим смешивания: экран; ширина: 100%; высота: 100%; размер шрифта: 160pt; Вес шрифта: смелее; выравнивание текста: по центру; высота строки: 210px; поле: 0;

В настоящее время наш текст выглядит следующим образом, на следующем шаге мы добавим собственный цвет фона.

Добавление цвета

Как вы уже могли догадаться, использование режимов наложения оставляет нам только два варианта цвета для области, окружающей текст. - черный или белый. тем не мение с белым, можно добавить немного цвета используя наложение, если цвет наложения хорошо соответствует используемому изображению.

Чтобы добавить цвет к окружающей области, добавьте

в HTML для наложения, и дать ему цвет фона с высокой прозрачностью. Также используйте режим смешивания: умножение свойство наложения, так как оно помогает цвету фона наложения смешаться немного лучше с изображением, появляющимся внутри текста.

  вода

 .overlay background-color: rgba (0,255,255, .1); режим смешивания: умножение; ширина: 100%; высота: 100%; положение: абсолютное; верх: 0;

С помощью этой техники мы можем закрасить окружающую область вокруг текста фоном изображения:

Обратите внимание, что техника хорошо работает только с тонкие прозрачные цвета. Если вы используете полностью непрозрачный цвет или цвет, который не совпадает с изображением, изображение, появляющееся внутри текста, будет иметь очень видимый оттенок используемого цвета, поэтому, если вы не ищете внешний вид, избегать непрозрачных цветов.

2. Текст окружен фоновым изображением

Даже при нормальном размещении текста на фоне изображения требует той же техники, Я собираюсь показать вам пример того, как выглядит вышеприведенная демонстрация, когда эффект обратный, т.е. когда цвет текста белый, а фон черный.

 .текст цвет: белый; цвет фона: черный; режим смешивания: экран; ширина: 100%; высота: 100%; размер шрифта: 160pt; Вес шрифта: смелее; выравнивание текста: по центру; высота строки: 210px; поле: 0;

Вы можете использовать то же самое наложение чтобы добавить цвет к тексту, если вы не хотите оставить его белым.

 .overlay background-color: rgba (0,255,255, .1); режим смешивания: умножение; ширина: 100%; высота: 100%; положение: абсолютное; верх: 0;

А ниже вы можете увидеть, как выглядит обратный случай:

Обратите внимание, что в Internet Explorer или любом другом браузере, который не поддерживает микс-смесь-режим свойство, фон изображения не появится, а текст останется черным (или белым).