Kazi ya invert

Kazi invert inaruhusu kubadilisha rangi za picha ya usuli. Thamani 0 inaashiria kwamba picha inabaki ya asili. Thamani 100% au 1 inabadilisha kabisa rangi za usuli. Nambari yoyote iliyo katika kiwango hii inabadilisha kwa sehemu rangi. Haiwezekani kuweka thamani hasi. Kwa default thamani ni 0.

Syntax

csskichaguzi {
  filter: invert(nambari);
}

Mfano

Wacha tubadilishe rangi za picha yetu hadi thamani 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;
}

Результат:

Mfano

Sasa wacha tubadilishe kabisa rangi za picha yetu hadi thamani 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;
}

Результат:

Mfano

Sasa wacha tuweke katika kazi invert thamani sawa 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;
}

Результат:

Angalia pia