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

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

Сінтаксіс

cssселектар {
  mix-blend-mode: значэнні;
}

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

Значэнні

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

Прыклад

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

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Прыклад

А цяпер давайце зменім рэжым змяшчэння на множанне:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Прыклад

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

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

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

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