Функция brightness

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

Синтаксис

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

Пример

Нека зададем на нашето изображение яркост от 20%:

html<div id="elem"></div>

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

Результат:

Пример

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

html<div id="elem"></div>

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

Результат:

Пример

Нека зададем на нашето изображение оригинална яркост:

html<div id="elem"></div>

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

Результат:

Вижте също