hue-rotate ֆունկցիա

hue-rotate ֆունկցիան թույլ է տալիս փոխել ֆոնային պատկերի գունայնությունը գունային շրջանի երանգի պտույտի միջոցով: Հատկության արժեքները նշվում են աստիճաններով, որոնք նշանակում են գունային շրջանի անկյունը: 0 կամ 360 արժեքը նշանակում է, որ պատկերը մնում է անփոփոխ, իսկ այս տիրույթի ներսում գտնվող ցանկացած թիվ հանգեցնում է ֆոնի երանգի փոփոխության: Լռելյայն արժեքը 0deg է:

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

cssընտրիչ {
  filter: hue-rotate(անկյուն);
}

Օրինակ

Եկեք մեր պատկերի համար սահմանենք 150deg գունայնություն:

html<div id="elem"></div>

css#elem {
  filter: hue-rotate(150deg);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Հիմա սահմանենք պատկերի գունայնությունը հավասար 50deg:

html<div id="elem"></div>

css#elem {
  filter: hue-rotate(50deg);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Եկեք hue-rotate հատկության մեջ արժեք չնշենք:

html<div id="elem"></div>

css#elem {
  filter: hue-rotate();
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Տես նաև