Função hue-rotate
A função hue-rotate permite
alterar a cromaticidade da imagem de fundo
por meio da rotação do matiz no círculo
cromático. Os valores da propriedade são especificados em graus, denotando
o ângulo do círculo cromático. O valor 0 ou 360 denota
que a imagem permanece inalterada, e qualquer número localizado dentro
desse intervalo leva a uma alteração no matiz do fundo.
Por padrão, o valor é 0deg.
Sintaxe
seletor {
filter: hue-rotate(ângulo);
}
Exemplo
Vamos definir para nossa imagem uma cromaticidade
igual a 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;
}
:
Exemplo
Agora vamos definir a cromaticidade da imagem
igual a 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;
}
:
Exemplo
Vamos não definir um valor na propriedade
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;
}
:
Veja também
-
função
blur,
que desfoca o fundo -
função
brightness,
que define o brilho do fundo -
função
contrast,
que define o contraste do fundo -
função
drop-shadow,
que define a sombra do fundo -
função
invert,
que inverte as cores de fundo -
função
opacity,
que define a transparência do fundo -
função
sepia,
que converte o fundo para sépia -
propriedade
background,
que representa a propriedade abreviada para o fundo -
propriedade
background-image,
com a qual se pode definir uma imagem de fundo para um bloco -
propriedade
filter,
que define o estilo para o fundo