Уласцівасць background-blend-mode

Уласцівасць background-blend-mode задае рэжым накладання фонавага відарыса на фонавы колер ці іншыя відарысы. У гэтай уласцівасці можна таксама пазначыць некалькі значэнняў праз коску, якія будуць ўжывацца ў тым жа парадку. Значэнні для ўласцівасці аналагічныя асноўным рэжымам графічных рэдактараў.

Сінтаксіс

cssселектар {
  background-blend-mode: рэжымы;
}

У табліцы прадстаўлены асноўныя значэнні для ўласцівасці background-blend-mode:

Значэнні

Значэнне	Апісанне
`normal`	Звычайны. Не выкарыстоўваецца змяшэнне колераў. Рэжым па змаўчанні.
`multiply`	Множанне. У гэтым рэжыме значэнне асноўнага колеру памнажаецца на значэнне сумяшчальнага колеру. Выніковы колер заўсёды ўяўляе сабой больш цёмны колер.
`screen`	Асвятленне. У гэтым рэжыме памнажаюцца адваротныя значэнні асноўнага і сумяшчальнага колеру. У якасці выніковага колеру заўсёды ўжываецца больш светлы колер.
`overlay`	Пакрыццё. У гэтым рэжыме колеры памнажаюцца або асвятляюцца ў залежнасці ад асноўнага колеру. Узоры ці колеры пакрываюць існуючыя пікселі, пакідаючы нязменнымі светлыя і цёмныя ўчасткі асноўнага колеру.

Прыклад

Давайце паглядзім як будзе выглядаць відарыс са значэннем па змаўчанні ўласцівасці background-blend-mode:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Прыклад

А цяпер давайце зменім значэнне ўласцівасці background-blend-mode на множанне:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Прыклад

Давайце ўсталюем для нашага відарыса рэжым асвятлення:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Глядзіце таксама

уласцівасць background,
якая ўяўляе сабой уласцівасць-скарачэнне для фону
уласцівасць background-image,
з дапамогай якой блоку можна задаць фонавую карцінку
уласцівасць mix-blend-mode,
з дапамогай якой можна накласці зыходныя колеры на фонавы відарыс
уласцівасць backdrop-filter,
якое дазваляе накладваць фільтры