Функция 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
selector {
filter: hue-rotate(ángulo);
}
Ejemplo
Establezcamos la cromaticidad de nuestra imagen
en 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;
}
:
Ejemplo
Ahora establezcamos la cromaticidad de la imagen
en 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;
}
:
Ejemplo
No establezcamos ningún valor en la propiedad
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;
}
:
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