Funkcija hue-rotate
Funkcija hue-rotate omogoča
spreminjanje barvnosti slike ozadja
z vrtenjem odtenka na barvnem
krogu. Vrednosti lastnosti so podane v stopinjah, ki označujejo
kot barvnega kroga. Vrednost 0 ali 360 pomeni,
da slika ostane nespremenjena, vsako število znotraj
tega območja pa povzroči spremembo odtenka ozadja.
Privzeto je vrednost 0deg.
Sintaksa
selektor {
filter: hue-rotate(kot);
}
Primer
Nastavimo barvnost naše slike
na 150deg:
<div id="elem"></div>
#elem {
filter: hue-rotate(150deg);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Primer
Zdaj nastavimo barvnost slike
na 50deg:
<div id="elem"></div>
#elem {
filter: hue-rotate(50deg);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Primer
Pustimo, da vrednost v lastnosti
hue-rotate ni nastavljena:
<div id="elem"></div>
#elem {
filter: hue-rotate();
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
invert,
ki obrne barve ozadja -
funkcija
opacity,
ki nastavi prosojnost ozadja -
funkcija
sepia,
ki pretvori ozadje v sepijo -
lastnost
background,
ki je okrajšava za ozadje -
lastnost
background-image,
s katero lahko elementu dodelimo sliko ozadja -
lastnost
filter,
ki določa slogi za ozadje