# Функция hue-rotate

Функция `hue-rotate` позволяет изменить цветность фонового изображения посредством поворота оттенка на цветовом круге. Значения свойства указываются в градусах, обозначающих угол цветового круга. Значение `0` или `360` обозначает, что изображение остается неизменным, а любое число расположенное внутри данного диапазона приводит к изменению оттенка фона. По умолчанию значение равно `0deg`.

## Синтаксис

`селектор { filter: hue-rotate(угол); }`

## Пример

Давайте установим для нашего изображения цветность равную `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; }`

:

## Пример

Теперь установим цветность изображения равную `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; }`

:

## Пример

Давайте не проставим значение в свойстве `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; }`

:

## Смотрите также

- функция `blur`,
  которая размывает фон
- функция `brightness`,
  которая задает яркость фону
- функция `contrast`,
  которая задает контрастность фону
- функция `drop-shadow`,
  которая задает тень фону
- функция `invert`,
  которая инвертирует цвета фона
- функция `opacity`,
  которая задает прозрачность фону
- функция `sepia`,
  которая преобразует фон в сепию
- свойство `background`,
  представляющее собой свойство-сокращение для фона
- свойство `background-image`,
  с помощью которого блоку можно задать фоновую картинку
- свойство `filter`,
  которое задает стиль для фона

← →
↑
en ru