Функција 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;
}

Результат:

Види још