invert funksiyası

invert funksiyası fon şəklindəki rəngləri inversiya etməyə imkan verir. 0 dəyəri şəklin orijinal qalacağını göstərir. 100% və ya 1 dəyəri fon rənglərini tamamilə inversiya edir. Bu diapazonda yerləşən istənilən ədəd rəngləri qismən inversiya edir. Mənfi dəyər təyin etmək olmaz. Susmaya görə dəyər 0-a bərabərdir.

Sintaksis

cssselektor {
  filter: invert(ədəd);
}

Nümunə

Gəlin şəkilimizin rənglərini 50% dəyərinə qədər inversiya edək:

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

Результат:

Nümunə

İndi isə gəlin şəkilimizin rənglərini 100% dəyərinə qədər inversiya edək:

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

Результат:

Nümunə

İndi isə gəlin invert funksiyasında 0-a bərabər dəyər təyin edək:

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

Результат:

Həmçinin bax