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
valija {
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:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: normal;
width: 400px;
height: 300px;
}
:
Näide
Nüüd muudame ühendamise režiimi korrutamiseks:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Vaata ka
-
omadus
background,
mis on tausta lühendatud omadus -
omadus
background-image,
millega saab plokile määrata taustapildi -
omadus
background-blend-mode,
millega saab ühendada taustapilti tausta värviga