Funkce hue-rotate
Funkce hue-rotate umožňuje
změnit barevnost obrázku na pozadí
prostřednictvím otočení odstínu na barevném
kruhu. Hodnoty vlastnosti se uvádějí ve stupních, které označují
úhel barevného kruhu. Hodnota 0 nebo 360 znamená,
že obrázek zůstane nezměněn, a jakékoli číslo uvnitř
tohoto rozsahu vede ke změně odstínu pozadí.
Výchozí hodnota je 0deg.
Syntaxe
selektor {
filter: hue-rotate(úhel);
}
Příklad
Nastavme našemu obrázku barevnost
rovnou 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;
}
:
Příklad
Nyní nastavme barevnost obrázku
rovnou 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;
}
:
Příklad
Neprostaňme hodnotu ve vlastnosti
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;
}
:
Viz také
-
funkce
blur,
která rozostřuje pozadí -
funkce
brightness,
která nastavuje jas pozadí -
funkce
contrast,
která nastavuje kontrast pozadí -
funkce
drop-shadow,
která nastavuje stín pozadí -
funkce
invert,
která invertuje barvy pozadí -
funkce
opacity,
která nastavuje průhlednost pozadí -
funkce
sepia,
která převádí pozadí na sépii -
vlastnost
background,
představující zkratkovou vlastnost pro pozadí -
vlastnost
background-image,
pomocí které lze bloku nastavit obrázek na pozadí -
vlastnost
filter,
která nastavuje styl pro pozadí