Ominaisuus mix-blend-mode

Ominaisuus mix-blend-mode asettaa värien sekoitustilan, jolla lähdeväri sekoittuu taustavärin tai taustakuvan kanssa. Ominaisuuden arvot vastaavat graafisten editorien pääasiallisia tiloja.

Syntaksi

valitsija {
	mix-blend-mode: arvot;
}

Taulukossa esitetään mix-blend-mode-ominaisuuden pääasialliset arvot:

Arvot

Arvo	Kuvaus
`normal`	Tavallinen. Värien sekoitusta ei käytetä. Oletustila.
`multiply`	Monista. Tässä tilassa lähdevärin arvo kerrotaan taustavärin arvolla. Tuloksena oleva väri on aina tummempi väri.
`screen`	Valaise. Tässä tilassa lähde- ja taustavärien käänteisarvot kerrotaan keskenään. Tuloksena käytetään aina vaaleampaa väriä.
`overlay`	Päällekkäin. Tässä tilassa värit joko kerrotaan tai vaalennetaan taustavärin mukaan. Kuviot tai värit peittävät olemassa olevat pikselit, jättäen taustavärin vaaleat ja tummat alueet ennalleen.

Esimerkki

Katsotaan miltä kuva näyttää mix-blend-mode-ominaisuuden oletusarvolla:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Esimerkki

Muutetaan nyt sekoitustila monistukseksi:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Esimerkki

Asetetaan mix-blend-mode-ominaisuudelle päällekkäin-arvo:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Katso myös

ominaisuus background,
joka on lyhennysominaisuus taustaa varten
ominaisuus background-image,
jolla elementille voidaan asettaa taustakuva
ominaisuus background-blend-mode,
jolla taustakuva voidaan sekoittaa taustavärin kanssa