⌘K

Omadus background-blend-mode

Omadus background-blend-mode määrab taustapildi ülekatte režiimi taustavärvi või teiste piltidega. Selles omaduses saab samuti määrata mitu väärtust komadega eraldatuna, mida rakendatakse samas järjekorras. Omaduse väärtused on sarnased põhilistele režiimidele graafikaredaktorites.

Süntaks

cssvalija {
  background-blend-mode: režiimid;
}

Tabelis on toodud põhilised väärtused omadusele background-blend-mode:

Väärtused

Väärtus Kirjeldus
normal Tavaline. Värvide segamist ei kasutata. Vaikerežiim.
multiply Korrutamine. Selles režiimis põhivärvi väärtus korrutatakse kattevärvi väärtusega. Tulemuseks olev värv on alati tumedam värv.
screen Helendamine. Selles režiimis korrutatakse põhi- ja kattevärvi pöördväärtused. Tulemuseks olevana värvina kasutatakse alati heledamat värvi.
overlay Ülekate. Selles režiimis värvid korrutatakse või helendatakse sõltuvalt põhivarvest. Mustrid või värvid katavad olemasolevaid pikseleid, jättes põhivärvi heledad ja tumedad alad muutmata.

Näide

Vaatame, kuidas näeb välja pilt omaduse background-blend-mode vaikeväärtusega: 

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;
}

Результат:

Näide

Nüüd muudame omaduse background-blend-mode väärtuse korrutamiseks: 

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;
}

Результат:

Näide

Määrame oma pildile helendamise režiimi: 

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;
}

Результат:

Vaata ka

BackOmadus backdrop-filterNextOmadus mix-blend-mode