Savybė mix-blend-mode

Savybė mix-blend-mode nustato pirminės spalvos maišymo su fono spalva arba fono paveikslėliu režimą. Savybės reikšmės yra analogiškos pagrindiniams grafinės informacijos redagavimo programų režimams.

Sintaksė

selektorius {
	mix-blend-mode: reikšmės;
}

Lentelėje pateikiamos pagrindinės savybės mix-blend-mode reikšmės:

Reikšmės

Reikšmė	Aprašas
`normal`	Normalus. Spalvų maišymas nenaudojamas. Numatytoji režimo reikšmė.
`multiply`	Dauginimas. Šiame režime pirminės spalvos reikšmė dauginama susijungusios spalvos reikšmė. Galutinė spalva visada yra tamsesnė spalva.
`screen`	Šviesinimas. Šiame režime dauginamos atvirkštinės pirminės ir susijungusios spalvos reikšmės. Kaip galutinė spalva visada taikoma šviesesnė spalva.
`overlay`	Uždengimas. Šiame režime spalvos dauginamos arba šviesinamos priklausomai nuo pirminės spalvos. Raštai ar spalvos uždedami ant esamų pikselių, paliekant šviesias ir tamsias pirminės spalvos sritis nepakitusias.

Pavyzdys

Pažiūrėkime, kaip atrodys paveikslėlis su numatytąja savybės mix-blend-mode reikšme:

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

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

Pavyzdys

Dabar pakeiskime maišymo režimą į dauginimą:

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

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

Pavyzdys

Nustatykime savybei mix-blend-mode uždengimo reikšmę:

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

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

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta fono savybė
savybė background-image,
kuria galima nustatyti fono paveikslėlį blokui
savybė background-blend-mode,
kuria galima uždeti fono paveikslėlį ant fono spalvos