Бацкгроунд-бленд-моде - ЦСС-трикови

У background-blend-modeособина дефинише како ан је елемент background-imageтреба да се стапају са својим background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Погледајте режим позадине бленда оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

У горњој демонстрацији, подразумевани background-imageлеви део није постављен у режиму мешања, па се слика преклапа са background-color. Са десне стране, међутим, бленд мод је изменио background-imageцрвену background-colorиспод. Али имајте на уму да ово додатно својство није утицало на боју текста.

Вредности

initial: подразумевана вредност без мешања.
inherit: наслеђује режим мешања родитељског елемента.
: вредност која ће променити слику позадине у зависности од боје позадине.

Вредност може бити подешена као нешто од следећег (у демос испод background-colorје црвено):

`luminosity`: сјај горње боје је очуван док се користи засићеност и нијанса боје позадине.

Демо

Ево радног примера како се те вредности тумаче у зависности од background-color:

Погледајте режим мешања позадине оловке од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Повезивање више начина мешања

Сваки слој позадине може имати само један бленд режим, међутим, ако користимо више линеарних градијената, на пример, сваки од њих може имати свој сопствени бленд режим који чини занимљив приказ:

Погледајте Градиенте оловке и режим бленда у позадини од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

То се постиже навођењем ових вредности по редоследу позадинског слоја који желите да остварите:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Први линеарни градијент има screenбленд мод, затим други линеарни градијент који има differenceи прву позадинску слику која је lightenпримењена на њега.