Eigenschap background-blend-mode

De eigenschap background-blend-mode bepaalt de mengmodus voor het over elkaar heen leggen van een achtergrondafbeelding op een achtergrondkleur of andere afbeeldingen. In deze eigenschap kunnen ook meerdere waarden, gescheiden door komma's, worden opgegeven, die in dezelfde volgorde worden toegepast. De waarden voor de eigenschap zijn vergelijkbaar met de belangrijkste modi van grafische editors.

Syntaxis

selector {
	background-blend-mode: modi;
}

In de tabel staan de belangrijkste waarden voor de eigenschap background-blend-mode:

Waarden

Waarde	Beschrijving
`normal`	Normaal. Er wordt geen kleurmenging gebruikt. Standaardmodus.
`multiply`	Vermenigvuldigen. In deze modus wordt de waarde van de voorgrondkleur vermenigvuldigd met de waarde van de achtergrondkleur. De resulterende kleur is altijd een donkerdere kleur.
`screen`	Scherm. In deze modus worden de omgekeerde waarden van de voorgrond- en achtergrondkleur vermenigvuldigd. Als resulterende kleur wordt altijd een lichtere kleur gebruikt.
`overlay`	Overlay. In deze modus worden kleuren vermenigvuldigd of verlicht afhankelijk van de voorgrondkleur. Patronen of kleuren bedekken bestaande pixels, waarbij lichte en donkere delen van de voorgrondkleur onveranderd blijven.

Voorbeeld

Laten we eens kijken hoe een afbeelding eruitziet met de standaardwaarde van de eigenschap background-blend-mode:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we nu de waarde van de eigenschap background-blend-mode veranderen naar vermenigvuldigen:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we voor onze afbeelding de schermmodus instellen:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Zie ook

de eigenschap background,
een verkorte eigenschap voor de achtergrond
de eigenschap background-image,
waarmee een achtergrondafbeelding aan een blok kan worden toegewezen
de eigenschap mix-blend-mode,
waarmee bronkleuren over een achtergrondafbeelding kunnen worden gelegd
de eigenschap backdrop-filter,
die het mogelijk maakt filters toe te passen