Funzione hue-rotate

La funzione hue-rotate consente di modificare la tonalità dell'immagine di sfondo mediante la rotazione della tonalità sul cerchio cromatico. I valori della proprietà sono specificati in gradi, che indicano l'angolo del cerchio cromatico. Il valore 0 o 360 indica che l'immagine rimane invariata, mentre qualsiasi numero all'interno di questo intervallo porta a un cambiamento di tonalità dello sfondo. Per impostazione predefinita, il valore è 0deg.

Sintassi

cssselettore {
  filter: hue-rotate(angolo);
}

Esempio

Impostiamo la tonalità della nostra immagine su 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;
}

Результат:

Esempio

Ora impostiamo la tonalità dell'immagine su 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;
}

Результат:

Esempio

Non specifichiamo alcun valore nella proprietà 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;
}

Результат:

Vedi anche