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;
}

Результат:

Шунингдек қаранг