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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

Читайте также: 10 (еще) хитростей CSS, которые вы, вероятно, не заметили

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

Увидеть перо Текст с фоном изображения HONGKIAT (@hkdc) на CodePen,

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

Читайте также: Как использовать режим смешивания CSS3 [CSS3 Tips]

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

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

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

B (Cb, Cs) = Cb × Cs

где: Cb – компонент цвета backgroundCs – компонент цвета исходного элементаB – функция смешивания

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

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

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

Если Cs – белый, его значение равно 1, выходной цвет равен Cb, потому что 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 пикселей; высота: 210 пикселей;
 background-image: url (someimage.jpg);
 размер фона: 100%;
 наценка: авто;
}
.text {
 черный цвет;
 цвет фона: белый;
 режим смешивания: экран;
 ширина: 100%;
 высота: 100%;
 размер шрифта: 160pt;
 Вес шрифта: смелее;
 выравнивание текста: по центру;
 высота строки: 210px;
 поле: 0;
}

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

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

<

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

вода

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

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

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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *