Функцыя 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,
якое задае стыль для фону