invert функциясы

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

Синтаксис

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

Мисал

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

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

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

Результат:

Мисал

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

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

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

Результат:

Мисал

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

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

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

Результат:

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