Как да се показва текст на изображение с CSS3 mix-режим

Фонови изображения изглеждат страхотно зад големи дисплейни текстове. Неговата реализация на CSS обаче не е толкова ясна. Можем да използваме фон клип: текст; имот, но все още е експериментална функция без достатъчно поддръжка на браузъра.

CSS алтернативата да показва фон на изображение зад текст е използвайки микс-смес режим Имот. Режими за смесване на HTML елементи се поддържат от всички модерни настолни и мобилни браузъри, с изключение на няколко, като например Internet Explorer.

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

когато фоновото изображение може да се види чрез текста
когато фоновото изображение се движи наоколо Текстът

Вижте някои примери в демонстрацията по-долу (изображенията са от unsplash.com).

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

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

Разгледайте списъка с режимите на смесване, от които ще използваме умножавам и екран в тази публикация.

Първо, нека да разгледаме как работят тези два специфични режима на смесване.

как `умножавам` & `екран` режимите на смесване работят

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

Най- `умножавам` режим на смесване

В умножавам режим на смесване, отделните цветове на елементите и техните фонове са умножен, и полученият цвят се прилага към крайната смесена версия.

Най- умножавам режимът на смесване се изчислява по следната формула:

B (Cb, Cs) = Cb × Cs

където:Cb - Цветен компонент на фонаCs - Цветен компонент на изходния елементB - Функция за смесване

Кога Cb и Cs са умножени, полученият цвят е смес от тези два цветни компонента и е тъмни като най-тъмните от двата цвята.

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

ако Cs е черно неговата стойност е 0, цветът на изхода също ще бъде черен, защото Cb × 0 = 0. Така че, когато елементът е оцветен в черно, той няма значение какъв цвят е фонът, всичко, което можем да видим след смесването, е черно.

ако Cs е бял неговата стойност е 1, изходният цвят е какъвто и да е Cb е защотоCb × 1 = Cb. Така че в този случай виждаме фона директно както е.

Най- `екран` режим на смесване

Най- екран режимът на смесване работи подобно на умножавам режим на смесване, но с обратния резултат. Така че, a черен план показва фона както е, и 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. Изображение, показано чрез текст

За да се покаже текст, който се показва чрез фоновото изображение, използваме екран режим на смесване с черен текст и бяло околно пространство.

  вода

 .фон ширина: 600 пиксела; височина: 210px; фонов образ: url (someimage.jpg); размер на фона: 100%; марж: автоматично;  .text цвят: черен; фонов цвят: бял; режим микс-смес: екран; ширина: 100%; височина: 100%; размер на шрифта: 160pt; font-weight: bolder; text-align: center; line-height: 210px; марж: 0;

Понастоящем нашият текст изглежда по-долу, а в следващата стъпка ще добавим персонализиран цвят към фона.

Добавяне на цвят

Както може би вече сте се досетили, използването на режимите на смесване ни оставя само два цвята за зоната около текста - Черно или бяло. въпреки това с бяло, възможно е да добавите малко цвят към него използвайки наслагване, ако цветът на наслагването добре съвпада с използваното изображение.

За да добавите цвят към заобикалящата област, добавете a

към HTML за наслагване, и дайте му a фонов цвят с висока прозрачност. Използвайте също mix-blend-mode: умножете свойство за наслагването, тъй като помага на фоновия цвят на наслагването смеси малко по-добре с изображението, което се появява в текста.

  вода

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

С тази техника можем да оцветяваме околността около текста с фона на изображението:

Имайте предвид, че техниката работи добре само с тънки прозрачни цветове. Ако използвате напълно непрозрачен цвят или цвят, който не съвпада с изображението, изображението, което се появява в текста, ще има много видим оттенък на използвания цвят, така че освен ако не изглежда, че искате, избягвайте непрозрачни цветове.

2. Текст, заобиколен от фонов образ

Макар и нормално разположение на текст върху фона на изображението изисква същата техника, Ще ви покажа пример за това как изглежда по-горе демото, когато ефектът е обърнат, когато цветът на текста е бял, а фонът е черен.

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

Можете да използвате същото покритие за да добавите цвят към текста, освен ако не искате да го запазите бял.

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

По-долу можете да видите как изглежда обратният случай:

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