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 касиети,
фонго стилди белгилейт