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
valija {
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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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:
<div id="elem"></div>
#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
-
omadus
background,
mis on tausta lühendomadus -
omadus
background-image,
mille abil saab plokile määrata taustapildi -
omadus
mix-blend-mode,
mille abil saab lähtevärve katta taustapildile -
omadus
backdrop-filter,
mis võimaldab peale kanda filtreid