Funkcia brightness

Funkcia brightness umožňuje zmeniť jas obrázka na pozadí. Pôvodný jas pozadia je určený hodnotou 100% alebo 1, pri ich znížení sa zníži aj jas obrázka. Naopak pri zvýšení hodnoty nad 100% jas stúpa. Záporné hodnoty sa nepoužívajú, a prázdna hodnota je automaticky vnímaná ako 1.

Syntax

cssselektor {
  filter: brightness(číslo);
}

Príklad

Nastavme nášmu obrázku jas na 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;
}

Результат:

Príklad

A teraz zvýšme jas obrázka na 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;
}

Результат:

Príklad

Nastavme nášmu obrázku pôvodný jas:

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;
}

Результат:

Pozri tiež