Funkcija invert

Funkcija invert omogoča inverzijo barv v sliki ozadja. Vrednost 0 pomeni, da slika ostane nespremenjena. Vrednost 100% ali 1 popolnoma obrne barve ozadja. Katera koli številka znotraj tega obsega delno obrne barve. Negativne vrednosti ni dovoljeno nastaviti. Privzeto je vrednost nastavljena na 0.

Sintaksa

cssselektor {
  filter: invert(število);
}

Primer

Obrnimo barve naše slike do vrednosti 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;
}

Результат:

Primer

Zdaj pa popolnoma obrnimo barve naše slike do vrednosti 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;
}

Результат:

Primer

Zdaj pa nastavimo vrednost v funkciji invert na 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;
}

Результат:

Glejte tudi