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 функцияси,
фонга шaffофлик беради
sepia функцияси,
фонни сепияга айлантиради
background хусусияти,
фон учун қисқартирилган хусусият ҳисобланади
background-image хусусияти,
орқали блокка фон расм бериш мумкин
filter хусусияти,
фон учун услуб беради