Funktionen hue-rotate

Funktionen hue-rotate giver mulighed for at ændre farvemætningen på et baggrundsbillede ved at rotere farvetonen på farvecirklen. Værdier for egenskaben angives i grader, som angiver vinklen på farvecirklen. Værdien 0 eller 360 betyder, at billedet forbliver uændret, mens ethvert tal inden for dette interval fører til en ændring af baggrundens farvetone. Som standard er værdien sat til 0deg.

Syntaks

cssselektor {
  filter: hue-rotate(vinkel);
}

Eksempel

Lad os indstille farvemætningen for vores billede til 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;
}

Результат:

Eksempel

Lad os nu indstille billedets farvemætning til 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;
}

Результат:

Eksempel

Lad os lade være med at angive en værdi i egenskaben 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;
}

Результат:

Se også