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