Funkcija hue-rotate
Funkcija hue-rotate omogućava
promenu nijanse pozadinske slike
pomoću rotacije nijanse na točku boja.
Vrednosti svojstva se navode u stepenima, označavajući
ugao točka boja. Vrednost 0 ili 360 označava
da slika ostaje nepromenjena, a bilo koji broj unutar
ovog opsega dovodi do promene nijanse pozadine.
Podrazumevano je vrednost 0deg.
Sintaksa
selektor {
filter: hue-rotate(ugao);
}
Primer
Hajde da postavimo nijansu 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
Sada postavimo nijansu 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
Hajde da ne navedemo vrednost u svojstvu
hue-rotate:
<div id="elem"></div>
#elem {
filter: hue-rotate();
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Vidi takođe
-
funkcija
blur,
koja zamućuje pozadinu -
funkcija
brightness,
koja zadaje svetlinu pozadini -
funkcija
contrast,
koja zadaje kontrastnost pozadini -
funkcija
drop-shadow,
koja zadaje senku pozadini -
funkcija
invert,
koja invertuje boje pozadine -
funkcija
opacity,
koja zadaje providnost pozadini -
funkcija
sepia,
koja transformiše pozadinu u sepiju -
svojstvo
background,
koje predstavlja skraćeno svojstvo za pozadinu -
svojstvo
background-image,
pomoću kojeg bloku možemo zadati pozadinsku sliku -
svojstvo
filter,
koje zadaje stil za pozadinu