# Функция invert

Функция `invert` позволяет инвертировать цвета в фоновом изображении. Значение `0` обозначает, что изображение остается исходным. Значение `100%` или `1` полностью инвертирует цвета фона. Любое число расположенное в данном диапазоне частично инвертирует цвета. Отрицательное значение нельзя задавать. По умолчанию значение равно `0`.

## Синтаксис

`селектор { filter: invert(число); }`

## Пример

Давайте инвертируем цвета нашего изображения до значения `50%`:

`<div id="elem"></div>` `#elem { filter: invert(50%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

А теперь давайте инвертируем цвета нашего изображения до значения `100%`:

`<div id="elem"></div>` `#elem { filter: invert(100%); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

## Пример

А теперь давайте зададим в функции `invert` значение равное `0`:

`<div id="elem"></div>` `#elem { filter: invert(0); background: url("bg.png") center / cover no-repeat; width: 400px; height: 300px; border: 1px solid black; }`

:

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

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

← →
↑
en ru