Funktionen invert

Funktionen invert giver mulighed for at invert farverne i baggrundsbilledet. Værdien 0 betyder, at billedet forbliver uændret. Værdien 100% eller 1 inverter baggrundsfarverne fuldstændigt. Ethvert tal inden for dette interval inverter farverne delvist. Negativ værdi kan ikke angives. Som standard er værdien 0.

Syntaks

cssselektor {
  filter: invert(tal);
}

Eksempel

Lad os invert farverne på vores billede til en værdi på 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;
}

Результат:

Eksempel

Og lad os nu invert farverne på vores billede til en værdi på 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;
}

Результат:

Eksempel

Og lad os nu angive i funktionen invert en værdi på 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;
}

Результат:

Se også