invert Fonksiyonu

invert fonksiyonu, arka plan görüntüsündeki renkleri tersine çevirmenize olanak tanır. 0 değeri, görüntünün orijinal halinde kalacağını belirtir. 100% veya 1 değeri arka plan renklerini tamamen tersine çevirir. Bu aralıkta yer alan herhangi bir sayı renkleri kısmen tersine çevirir. Negatif bir değer belirtilemez. Varsayılan değer 0'dır.

Sözdizimi

cssseçici {
  filter: invert(sayı);
}

Örnek

Görselimizin renklerini 50% değerine kadar tersine çevirelim:

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

Результат:

Örnek

Şimdi ise görselimizin renklerini 100% değerine kadar tersine çevirelim:

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

Результат:

Örnek

Şimdi de invert fonksiyonuna 0 değerini verelim:

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

Результат:

Ayrıca Bakınız