⌘K

Omadus mix-blend-mode

Omadus mix-blend-mode määrab esiplaani värvi ühendamise režiimi tausta värvi või taustapildiga. Omaduse väärtused on sarnased põhilistele režiimidele graafikaredaktorites.

Süntaks

cssvalija {
  mix-blend-mode: väärtused;
}

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

Väärtused

Väärtus Kirjeldus
normal Tavaline. Värvide segamist ei kasutata. Vaikerežiim.
multiply Korrutamine. Selles režiimis korrutatakse esiplaani värvi väärtus tausta värvi väärtusega. Tulemuseks olev värv on alati tumedam värv.
screen Valgustamine. Selles režiimis korrutatakse esiplaani ja tausta värvi pöördväärtused. Tulemuseks kasutatakse alati heledamat värvi.
overlay Ülekate. Selles režiimis korrutatakse või valgustatakse värve sõltuvalt tausta värvist. Mustrid või värvid katavad olemasolevad pikslid, jättes tausta värvi heledad ja tumedad alad muutumatuks.

Näide

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

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Näide

Nüüd muudame ühendamise režiimi korrutamiseks: 

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Näide

Määrame omadusele mix-blend-mode väärtuseks ülekate: 

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Vaata ka

BackOmadus background-blend-modeNextOmadus filter