Egenskaben mix-blend-mode

Egenskaben mix-blend-mode angiver blandingstilstanden for, hvordan en kildefarve blandes med en baggrundsfarve eller baggrundsbillede. Værdierne for egenskaben svarer til de grundlæggende tilstande i grafikprogrammer.

Syntaks

selektor {
	mix-blend-mode: værdier;
}

Tabellen viser de grundlæggende værdier for egenskaben mix-blend-mode:

Værdier

Værdi	Beskrivelse
`normal`	Normal. Der anvendes ikke farveblanding. Standardtilstand.
`multiply`	Multiplikation. I denne tilstand multipliceres værdien af kildens farve med værdien af baggrundsfarven. Den resulterende farve er altid en mørkere farve.
`screen`	Oplysning. I denne tilstand multipliceres de omvendte værdier af kildens og baggrundsfarven. Den resulterende farve er altid en lysere farve.
`overlay`	Overlejring. I denne tilstand multipliceres eller oplyses farverne afhængigt af baggrundsfarven. Mønstre eller farver overlejrer de eksisterende pixel, mens lyse og mørke områder af baggrundsfarven forbliver uændrede.

Eksempel

Lad os se, hvordan et billede vil se ud med standardværdien for egenskaben 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;
}

Eksempel

Lad os nu ændre blandingstilstanden til multiplikation:

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

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

Eksempel

Lad os angive værdien overlejring for egenskaben mix-blend-mode:

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

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

Se også

egenskaben background,
som er en sammentrukket egenskab for baggrund
egenskaben background-image,
som kan bruges til at tildele et baggrundsbillede til et element
egenskaben background-blend-mode,
som kan bruges til at overlejre et baggrundsbillede på en baggrundsfarve