Функция hue-rotate

La función hue-rotate permite cambiar la cromaticidad de la imagen de fondo mediante la rotación del tono en el círculo cromático. Los valores de la propiedad se indican en grados, que denotan el ángulo del círculo cromático. El valor 0 o 360 denota que la imagen permanece sin cambios, y cualquier número situado dentro de este rango conduce a un cambio de tono del fondo. Por defecto, el valor es 0deg.

Sintaxis

cssselector {
  filter: hue-rotate(ángulo);
}

Ejemplo

Establezcamos la cromaticidad de nuestra imagen en 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;
}

Результат:

Ejemplo

Ahora establezcamos la cromaticidad de la imagen en 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;
}

Результат:

Ejemplo

No establezcamos ningún valor en la propiedad 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;
}

Результат:

Véase también

la función blur,
que difumina el fondo
la función brightness,
que establece el brillo del fondo
la función contrast,
que establece el contraste del fondo
la función drop-shadow,
que establece la sombra del fondo
la función invert,
que invierte los colores del fondo
la función opacity,
que establece la transparencia del fondo
la función sepia,
que transforma el fondo a sepia
la propiedad background,
que es una propiedad abreviada para el fondo
la propiedad background-image,
mediante la cual se puede asignar una imagen de fondo a un bloque
la propiedad filter,
que establece el estilo para el fondo