Funkcija hue-rotate

Funkcija hue-rotate leidžia pakeisti fono paveikslėlio spalvingumą perkeliant atspalvį spalvų rate. Savybės reikšmės nurodomos laipsniais, reiškiantis spalvų rato kampą. Reikšmė 0 arba 360 reiškia, kad paveikslėlis lieka nepakitęs, o bet koks skaičius esantis šiame diapazone keičia fono atspalvį. Pagal nutylėjimą reikšmė yra 0deg.

Sintaksė

selektorius {
	filter: hue-rotate(kampas);
}

Pavyzdys

Nustatykime mūsų paveikslėlio spalvingumą lygų 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;
}

Pavyzdys

Dabar nustatykime paveikslėlio spalvingumą lygų 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;
}

Pavyzdys

Neišskirkime reikšmės savybėje 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;
}

Taip pat žiūrėkite

funkcija blur,
kuri išblunora foną
funkcija brightness,
kuri nustato fono ryškumą
funkcija contrast,
kuri nustato fono kontrastą
funkcija drop-shadow,
kuri nustato fono šešėlį
funkcija invert,
kuri apverčia fono spalvas
funkcija opacity,
kuri nustato fono permatomumą
funkcija sepia,
kuri paverčia foną sepija
savybė background,
kuri yra sutrumpinta fono savybė
savybė background-image,
kuria blokui galima nustatyti fono paveikslėlį
savybė filter,
kuri nustato fono stilių