Eienskap mix-blend-mode

Die eienskap mix-blend-mode spesifiseer die modus om 'n voorste kleur met 'n agtergrond- kleur of agtergrondbeeld te meng. Die waardes vir die eienskap is soortgelyk aan die hoofmodusse van grafiese redigeerders.

Sintaksis

selektor {
	mix-blend-mode: waardes;
}

Die tabel toon die hoofwaardes vir die eienskap mix-blend-mode:

Waardes

Waarde	Beskrywing
`normal`	Normaal. Daar word nie kleurmenging gebruik nie. Standaardmodus.
`multiply`	Vermenigvuldig. In hierdie modus word die voorste kleurwaarde vermenigvuldig met die agtergrondkleurwaarde. Die resulterende kleur is altyd 'n donkerder kleur.
`screen`	Skerm (ligter maak). In hierdie modus word die omgekeerde waardes van die voorste en agtergrondkleur vermenigvuldig. As resulterende kleur word altyd 'n ligter kleur toegepas.
`overlay`	Oorvleuel. In hierdie modus word kleure vermenigvuldig of ligter gemaak afhangende van die agtergrondkleur. Patrone of kleure oorvleuel die bestaande pixels, terwyl ligte en donker areas van die agtergrondkleur onveranderd bly.

Voorbeeld

Kom ons kyk hoe 'n prentjie sal lyk met die verstekwaarde van die eienskap mix-blend-mode:

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

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

Voorbeeld

Kom ons verander nou die mengmodus na vermenigvuldig:

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

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

Voorbeeld

Kom ons stel die eienskap mix-blend-mode in op oorvleuel:

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

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

Sien ook

die eienskap background,
wat 'n kort eiendom is vir agtergrond
die eienskap background-image,
waarmee jy 'n agtergrondprent vir 'n blok kan spesifiseer
die eienskap background-blend-mode,
waarmee jy 'n agtergrondprent op 'n agtergrondkleur kan oorvleuel