Functie invert

De functie invert maakt het mogelijk om kleuren in de achtergrondafbeelding om te keren. De waarde 0 geeft aan dat de afbeelding origineel blijft. De waarde 100% of 1 keert de achtergrondkleuren volledig om. Elk getal binnen dit bereik keert de kleuren gedeeltelijk om. Een negatieve waarde kan niet worden ingesteld. Standaard is de waarde 0.

Syntaxis

selector {
	filter: invert(getal);
}

Voorbeeld

Laten we de kleuren van onze afbeelding omkeren tot een waarde van 50%:

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

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we nu de kleuren van onze afbeelding omkeren tot een waarde van 100%:

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

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voorbeeld

Laten we nu in de functie invert een waarde instellen gelijk aan 0:

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

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Zie ook

functie blur,
die de achtergrond vervaagt
functie brightness,
die de helderheid van de achtergrond instelt
functie contrast,
die het contrast van de achtergrond instelt
functie drop-shadow,
die een schaduw voor de achtergrond instelt
functie hue-rotate,
die de kleurtoon van de achtergrond instelt
functie opacity,
die de transparantie van de achtergrond instelt
functie sepia,
die de achtergrond omzet in sepiakleur
eigenschap background,
dat een verkorte eigenschap voor de achtergrond is
eigenschap background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld
eigenschap filter,
die de stijl voor de achtergrond instelt