invert függvény

Az invert függvény lehetővé teszi a színek inverzióját a háttérképben. A 0 érték azt jelenti, hogy a kép eredeti marad. Az 100% vagy 1 érték teljesen inverziója a háttér színeit. Az adott tartományban bármely szám részlegesen inverziója a színeket. Negatív érték nem adható meg. Alapértelmezetten az érték 0.

Szintaxis

szelektor {
	filter: invert(szám);
}

Példa

Inverziáljuk a képünk színeit 50% értékre:

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

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

Példa

Most pedig inverziáljuk a képünk színeit 100% értékre:

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

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

Példa

Most pedig adjuk meg az invert függvényben a 0 értéket:

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

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

Lásd még

blur függvény,
amely elhomályosítja a hátteret
brightness függvény,
amely beállítja a háttér fényerejét
contrast függvény,
amely beállítja a háttér kontrasztját
drop-shadow függvény,
amely árnyékot ad a hátterhez
hue-rotate függvény,
amely beállítja a háttér színárnyalatát
opacity függvény,
amely beállítja a háttér átlátszóságát
sepia függvény,
amely szépia effektust ad a hátternek
background tulajdonság,
amely egy rövidített tulajdonság a háttérhez
background-image tulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz
filter tulajdonság,
amely stílust ad a hátternek