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

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

Esempio

Impostiamo la tonalità della nostra immagine su 150deg:

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

#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:

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

#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:

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

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

Vedi anche

la funzione blur,
che sfoca lo sfondo
la funzione brightness,
che imposta la luminosità dello sfondo
la funzione contrast,
che imposta il contrasto dello sfondo
la funzione drop-shadow,
che aggiunge un'ombra allo sfondo
la funzione invert,
che inverte i colori dello sfondo
la funzione opacity,
che imposta la trasparenza dello sfondo
la funzione sepia,
che trasforma lo sfondo in seppia
la proprietà background,
che è una proprietà abbreviata per lo sfondo
la proprietà background-image,
con cui si può assegnare un'immagine di sfondo a un blocco
la proprietà filter,
che definisce lo stile per lo sfondo