invert ֆունկցիա

invert ֆունկցիան թույլ է տալիս ինվերտել գույները ֆոնային պատկերում: 0 արժեքը նշանակում է, որ պատկերը մնում է բնօրինակը: 100% կամ 1 արժեքները ամբողջությամբ ինվերտում են ֆոնի գույները: Այս միջակայքում գտնվող ցանկացած թիվ մասնակիորեն ինվերտում է գույները: Բացասական արժեք հնարավոր չէ նշել: Լռելյայն արժեքը 0 է:

Շարահյուսություն

cssընտրիչ {
  filter: invert(թիվ);
}

Օրինակ

Եկեք ինվերտենք մեր պատկերի գույները մինչև 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;
}

Результат:

Օրինակ

Այժմ եկեք ինվերտենք մեր պատկերի գույները մինչև 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;
}

Результат:

Օրինակ

Այժմ եկեք invert ֆունկցիայում նշենք 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;
}

Результат:

Տես նաև