У 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
примењена на њега.
Више информација
- Основе ЦСС режима мешања
- позадински бленд-режим на МДН-у
- Компоновање и мешање на В3Ц
- бацкгроунд-бленд-моде на вебплатформ.орг
- Колекција демонстрација ЦСС бленд режима
- Упознавање ЦСС режима мешања
Подршка прегледача
Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
---|---|---|---|---|---|---|
35+ | 7.1 | 35+ | 27+ | Јок | 37+ | 8.1+ |