Мик-бленд-моде - ЦСС-трикови

mix-blend-modeОсобина дефинише како садржај елементом треба мешати са позадином. На пример, текст а

могао да се стопи са позадином иза ње на занимљиве начине.

.blend ( mix-blend-mode: exclusion; )

У примеру изнад садржај је измењен mix-blend-modeтако да су боје текста изузете из његове позадине. Ово је само једна од многих вредности за ово својство.

Постоји проблем са Цхроме-ом 58+ који mix-blend-modeсе неће приказивати на елементима који су постављени на прозирни елемент . Тхе је постављен у издању 711955 у Цхроме-у, који је додељен у време писања овог документа. У међувремену, једноставно решење је доделити белу (или заиста било коју) боју позадине елементу тела.

Вредности

initial: подразумевано подешавање својства које не поставља режим мешања.
inherit: елемент ће наследити бленд режим од свог надређеног елемента.
unset: уклања тренутни бленд режим из елемента.
: ово је атрибут једног од бленд модова испод:
normal: овај атрибут не примењује никакво мешање.
multiply: елемент се множи са позадином и замењује боју позадине. Добијена боја је увек тамна попут позадине.
screen: множи позадину и садржај затим допуњује резултат. То ће резултирати светлијим садржајем од background-color.
прекривање: множи или приказује садржај у зависности од боје позадине. Ово је обрнуто од режима мешања тврдог светла.
затамнити: позадина се замењује садржајем тамо где је садржај тамнији, у супротном се оставља онакав какав је био.
lighten: позадина се замењује садржајем тамо где је светлији.
color-dodge: овај атрибут освјетљава боју позадине како би одражавала боју садржаја.
color-burn: ово затамњује позадину да одражава природну боју садржаја.
hard-light: у зависности од боје садржаја, овај атрибут ће га приказати или умножити.
soft-light: у зависности од боје садржаја, ово ће га потамнити или осветлити.
difference: ово одузима најтамнију од две боје од најсветлије боје.
exclusion: слично differenceали са мањим контрастом.
hue: ствара боју са нијансом садржаја у комбинацији са засићеношћу и осветљеношћу позадине.
saturation: ствара боју засићењем садржаја у комбинацији са нијансом и осветљеношћу позадине.
color: ствара боју с нијансом и засићеношћу садржаја и сјајношћу позадине.
luminosity: ствара боју са осветљеношћу садржаја и нијансом и засићеношћу позадине. Ово је инверзна вредност colorатрибута.

Вреди напоменути да подешавање начина мешања који не normalгенерише нови контекст слагања који се затим мора уклопити са контекстом слагања који садржи елемент.

Ефекат ових вредности приказан је у демонстрацији испод:

Више информација

Основе ЦСС режима мешања
мик-бленд-моде на МДН
мик-бленд-моде на В3Ц
Колекција демонстрација ЦСС Бленд Моде
Упознавање ЦСС режима мешања

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.