Funkcija invert
Funkcija invert omogoča
inverzijo barv v sliki ozadja.
Vrednost 0 pomeni,
da slika ostane nespremenjena. Vrednost
100% ali 1 popolnoma obrne barve ozadja.
Katera koli številka znotraj tega
obsega delno obrne barve.
Negativne vrednosti ni dovoljeno nastaviti.
Privzeto je vrednost nastavljena na 0.
Sintaksa
selektor {
filter: invert(število);
}
Primer
Obrnimo barve naše slike do
vrednosti 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;
}
:
Primer
Zdaj pa popolnoma obrnimo barve naše slike do
vrednosti 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;
}
:
Primer
Zdaj pa nastavimo vrednost v
funkciji invert na
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;
}
:
Glejte tudi
-
funkcija
blur,
ki zamegli ozadje -
funkcija
brightness,
ki nastavi svetlost ozadja -
funkcija
contrast,
ki nastavi kontrastnost ozadja -
funkcija
drop-shadow,
ki doda senco ozadju -
funkcija
hue-rotate,
ki nastavi barvni ton ozadja -
funkcija
opacity,
ki nastavi prosojnost ozadja -
funkcija
sepia,
ki pretvori ozadje v sepijo -
lastnost
background,
ki je okrajšava za lastnosti ozadja -
lastnost
background-image,
s katero lahko elementu dodelimo sliko ozadja -
lastnost
filter,
ki določa filtre za ozadje