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
-
blurfüggvény,
amely elhomályosítja a hátteret -
brightnessfüggvény,
amely beállítja a háttér fényerejét -
contrastfüggvény,
amely beállítja a háttér kontrasztját -
drop-shadowfüggvény,
amely árnyékot ad a hátterhez -
hue-rotatefüggvény,
amely beállítja a háttér színárnyalatát -
opacityfüggvény,
amely beállítja a háttér átlátszóságát -
sepiafüggvény,
amely szépia effektust ad a hátternek -
backgroundtulajdonság,
amely egy rövidített tulajdonság a háttérhez -
background-imagetulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz -
filtertulajdonság,
amely stílust ad a hátternek