Функција hue-rotate
Функција hue-rotate омогућава
промену боје позадинске слике
помоћу ротације нијансе на бојеном
кругу. Вредности својства наводе се у степенима, које означавају
угао бојеног круга. Вредност 0 или 360 означава,
да слика остаје непромењена, а било који број унутар
овог опсега доводи до промене нијансе позадине.
Подразумевана вредност је 0deg.
Синтакса
селектор {
filter: hue-rotate(угао);
}
Пример
Поставимо нашој слици боју
једнаку 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;
}
:
Пример
Сада поставимо боју слике
једнаку 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;
}
:
Пример
Да не бисмо поставили вредност у својству
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;
}
:
Погледајте такође
-
функција
blur,
која замагљује позадину -
функција
brightness,
која поставља осветљеност позадини -
функција
contrast,
која поставља контраст позадини -
функција
drop-shadow,
која поставља сенку позадини -
функција
invert,
која инвертује боје позадине -
функција
opacity,
која поставља провидност позадини -
функција
sepia,
која претвара позадину у сепију -
својство
background,
које представља скраћено својство за позадину -
својство
background-image,
помоћу којег блоку можемо поставити позадинску слику -
својство
filter,
које поставља стил за позадину