invert функциясы

invert функциясы фондун сүрөтүнүн түстөрүн инверттөөгө мүмкүндүк берет. 0 мааниси сүрөт өзгөрбөй каларын билдирет. 100% же 1 мааниси фондун түстөрүн толугу менен инверттейт. Ушул диапазондо жайгашкан каалаган сан түстөрдү жарым-жартылай инверттейт. Терс маани берүүгө болбойт. Демейки маани 0.

Синтаксис

тандоочу {
	filter: invert(сан);
}

Мисал

Келгиле, сүрөтүбүздүн түстөрүн 50% маанисине чейин инверттейли:

<div id="elem"></div>

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Мисал

Эми болсо, келгиле сүрөтүбүздүн түстөрүн 100% маанисине чейин инверттейли:

<div id="elem"></div>

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Мисал

Эми болсо, келгиле invert функциясына 0 барабар маани берип көрөлү:

<div id="elem"></div>

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ошондой эле караңыз

blur функциясы,
бул фонду булдаткан
brightness функциясы,
бул фонго жаркырактык берген
contrast функциясы,
бул фонго контрасттуулук берген
drop-shadow функциясы,
бул фонго көлөкө берген
hue-rotate функциясы,
бул фонго түстүүлук берген
opacity функциясы,
бул фонго өтө ачыктуулук берген
sepia функциясы,
бул фонду сепияга айландырган
background касиети,
бул фон үчүн кыскартылган касиет болгон
background-image касиети,
бул менен блокко фондук сүрөт берүүгө болгон
filter касиети,
бул фон үчүн стилди белгилеген