Invert funktsiyasi

invert funktsiyasi fon rasmidagi ranglarni inversiyalash imkonini beradi. 0 qiymati rasm o'zgarishsiz qolishini bildiradi. 100% yoki 1 qiymati fon ranglarini to'liq inversiyalaydi. Ushbu oralig'idagi har qanday raqam ranglarni qisman inversiyalaydi. Salbiy qiymat berib bo'lmaydi. Standart qiymat 0 ga teng.

Sintaksis

cssselector {
  filter: invert(son);
}

Misol

Keling, rasmimizning ranglarini 50% qiymatigacha inversiyalaymiz:

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

Результат:

Misol

Endi esa, rasmimizning ranglarini 100% qiymatigacha inversiyalaymiz:

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

Результат:

Misol

Endi esa, invert funktsiyasiga 0 ga teng qiymat beramiz:

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

Результат:

Shuningdek qarang