Како приказати текст на слици са ЦСС3 мик-бленд модом

Позадине слике изгледају сјајно иза великих екранских текстова. Међутим, имплементација ЦСС-а није тако једноставна. Можемо користити бацкгроунд-цлип: текст; ипак, ипак је то експериментална функција без довољне подршке за прегледач.

ЦСС алтернатива за приказ позадине слике иза текста је помоћу мик-бленд-моде својство. Режими мешања за ХТМЛ елементе су прилично подржани у свим модерним десктоп и мобилним претраживачима, осим неколико, као што је Интернет Екплорер.

У овом посту ћемо видети како мик-бленд-моде (посебно два његова начина рада) и како га можете користити приказ текста са позадином слике у два случаја употребе:

1. када је позадинска слика може се видети кроз текст
2. када је позадинска слика трчи около Текст

Погледајте неке примјере у демо верзији испод (слике су са унспласх.цом).

Тхе мик-бленд-моде ЦСС својство дефинише како садржаја анд тхе бацкдроп ХТМЛ елемента уклопите заједно у боји.

Погледајте листу начина мешања, од којих ћемо користити мултипли и екрану у овом посту.

Прво, погледајмо како ова два специфична режима мешања раде.

како мултипли & екрану бленд модови раде

Режими мешања су технички функције израчунајте коначну вредност боје користећи компоненте боје елемента и његову позадину.

Тхе мултипли бленд моде

Ин тхе мултипли бленд мод, појединачне боје елемената и њихове позадине мултиплиед, и резултујућа боја се примењује на коначну комбиновану верзију.

Тхе мултипли режим мешања се израчунава према следећој формули:

Б (Цб, Цс) = Цб × Цс

где:Цб - Компонента боје позадинеЦс - Боја компоненте изворног елементаБ - Функција мешања

Када Цб и Цс се множе, резултујућа боја је мешавина ове две компоненте боје и јесте тамна као најмрачнија од две боје.

Да бисмо креирали позадину текста, морамо се фокусирати на случај када Цс (компонента боје елемента извора) је било црно или бело.

Ако Цс је црн његова вредност је 0, излазна боја ће такође бити црна, јер Цб × 0 = 0. Дакле, када је елемент обојен црном бојом, то није важно каква је боја позадина, све што видимо након мијешања је црно.

Ако Цс је бео његова вредност је 1, излазна боја је било шта Цб је зато штоЦб × 1 = Цб. Дакле, у овом случају видимо позадину директно као што је.

Тхе екрану бленд моде

Тхе екрану бленд режим ради слично као мултипли бленд мод, али са супротним резултатом. Тако да блацк форегроунд приказује позадину као што је, и а бели предњи план показује белу боју без обзира на позадину.

Брзо ћемо видети његову формулу:

Б (Цб, Цс) = Цб + Цс - (Цб × Цс)

Када Цс је црн (0), боја позадине ће бити приказана након мешања, као:

Цб + 0 - (Цб × 0) = Цб + 0 - 0 = Цб

Када Цс је бео (1) резултат ће бити беле са било којом позадином, као:

Цб + 1 - (Цб × 1) = Цб + 1 - Цб = 1

1. Слика приказана кроз текст

Да бисте приказали текст који се приказује кроз позадинску слику, користићемо екрану бленд моде са црни текст и бели околни простор.

 
 
Вода
 
 

 .бацкдроп видтх: 600пк; хеигхт: 210пк; позадина-слика: урл (сомеимаге.јпг); величина позадине: 100%; маргин: ауто;  .тект цолор: блацк; боја позадине: бела; мик-бленд-моде: екран; ширина: 100%; висина: 100%; фонт-сизе: 160пт; фонт-веигхт: болдер; тект-алигн: центар; лине-хеигхт: 210пк; маргин: 0;  

Тренутно наш текст изгледа испод, у следећем кораку додаћемо прилагођену боју позадини.

Додавање боје

Као што сте до сада претпоставили, коришћење режима мешања оставља нам само два избора боја за подручје које окружује текст - црно или бело. Међутим са белим, могуће је додати мало боје користећи преклапање, ако је боја прекривања лепо се слаже са употребљеном сликом.

Да бисте додали боју околини, додајте а

у ХТМЛ за преклапање, и дајте му позадинска боја са високом транспарентношћу. Такође користите мик-бленд-моде: мултипли својство за слој, јер помаже позадинској боји слоја уклопити мало боље са сликом која се појављује унутар текста.

 
 
Вода
 
 
 

 .оверлаи бацкгроунд-цолор: ргба (0,255,255, .1); мик-бленд-моде: мултипли; ширина: 100%; висина: 100%; позиција: апсолутна; топ: 0;  

Овом техником можемо обојити околно подручје око текста позадином слике:

Имајте на уму да техника добро ради само са суптилне транспарентне боје. Ако користите потпуно непрозирну боју или боју која се не подудара са сликом, слика која се појављује у тексту имаће веома видљиву боју коришћене боје, тако да осим ако не изгледа, избегавајте непрозирне боје.

2. Текст окружен позадином слике

Иако је нормално постављање текста на позадину слике захтева исту технику, Показаћу вам пример како изгледа горе наведени демо када ефекат је обрнут, тј. када је боја текста бијела а позадина црна.

 .текст боја: бела; боја позадине: црна; мик-бленд-моде: екран; ширина: 100%; висина: 100%; фонт-сизе: 160пт; фонт-веигхт: болдер; тект-алигн: центар; лине-хеигхт: 210пк; маргин: 0;  

Можете користити саме оверлаи да бисте додали боју тексту, осим ако не желите да остане бела.

 .оверлаи бацкгроунд-цолор: ргба (0,255,255, .1); мик-бленд-моде: мултипли; ширина: 100%; висина: 100%; позиција: апсолутна; топ: 0;  

Испод можете видети како изгледа обрнути случај:

Имајте на уму да у Интернет Екплореру или било ком другом прегледачу који не подржава мик-бленд-моде својство, позадина слике се неће појавити, а текст ће остати црн (или бели).