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