Funksjonen invert

Funksjonen invert lar deg invertere fargene i bakgrunnsbildet. Verdien 0 betyr at bildet forblir uendret. Verdien 100% eller 1 inverterer bakgrunnsfargene fullstendig. Ethvert tall innenfor dette området vil invertere fargene delvis. Negativ verdi kan ikke angis. Standardverdien er 0.

Syntaks

velger {
	filter: invert(tall);
}

Eksempel

La oss invertere fargene på bildet vårt til verdien 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;
}

Eksempel

Og la oss nå invertere fargene på bildet vårt til verdien 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;
}

Eksempel

Og la oss nå sette funksjonen invert til verdien 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;
}

Se også

funksjonen blur,
som uskarpgjør bakgrunnen
funksjonen brightness,
som setter lysstyrken på bakgrunnen
funksjonen contrast,
som setter kontrasten på bakgrunnen
funksjonen drop-shadow,
som setter skygge på bakgrunnen
funksjonen hue-rotate,
som setter fargetone på bakgrunnen
funksjonen opacity,
som setter gjennomsiktighet på bakgrunnen
funksjonen sepia,
som konverterer bakgrunnen til sepia
egenskapen background,
som er en snarveisegenskap for bakgrunn
egenskapen background-image,
som brukes til å sette bakgrunnsbilde på et element
egenskapen filter,
som setter stil for bakgrunnen