Funkcia invert

Funkcia invert umožňuje invertovať farby v obrázku na pozadí. Hodnota 0 znamená, že obrázok zostane pôvodný. Hodnota 100% alebo 1 úplne invertuje farby pozadia. Akékoľvek číslo v tomto rozsahu čiastočne invertuje farby. Zápornú hodnotu nie je možné zadať. Predvolená hodnota je 0.

Syntax

selektor {
	filter: invert(číslo);
}

Príklad

Invertujme farby nášho obrázka na hodnotu 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;
}

Príklad

A teraz invertujme farby nášho obrázka na hodnotu 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;
}

Príklad

A teraz nastavme v funkcii invert hodnotu rovnú 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;
}

Pozri tiež

funkcia blur,
ktorá rozostrí pozadie
funkcia brightness,
ktorá nastaví jas pozadia
funkcia contrast,
ktorá nastaví kontrast pozadia
funkcia drop-shadow,
ktorá nastaví tieň pozadia
funkcia hue-rotate,
ktorá nastaví odtieň pozadia
funkcia opacity,
ktorá nastaví priehľadnosť pozadia
funkcia sepia,
ktorá prevedie pozadie na sépiu
vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie
vlastnosť background-image,
ktorou možno bloku nastaviť obrázok na pozadí
vlastnosť filter,
ktorá nastavuje štýl pre pozadie