# Функция brightness

Функция `brightness` позволяет изменить яркость фонового изображения. Исходная яркость фона определяется значением `100%` или `1`, при их уменьшении снижается и яркость изображения. Соответственно при увеличении значения более `100%` яркость повышается. Отрицательные значения не применяются, а пустое значение автоматически воспринимается как `1`.

## Синтаксис

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

## Пример

Давайте установим для нашего изображения яркость в `20%`:

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

:

## Пример

А теперь давайте увеличим яркость изображения до `120%`:

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

:

## Пример

Давайте установим для нашего изображения исходную яркость:

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

:

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

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

← →
↑
en ru