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

cssseletor {
  filter: hue-rotate(ângulo);
}

Exemplo

Vamos definir para nossa imagem uma cromaticidade igual a 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;
}

Результат:

Exemplo

Agora vamos definir a cromaticidade da imagem igual a 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;
}

Результат:

Exemplo

Vamos não definir um valor na propriedade 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;
}

Результат:

Veja também