Funkce brightness

Funkce brightness umožňuje upravit jas obrázku na pozadí. Původní jas pozadí je určen hodnotou 100% nebo 1, při jejich snížení se sníží i jas obrázku. Naopak při zvýšení hodnoty nad 100% se jas zvýší. Záporné hodnoty se nepoužívají, a prázdná hodnota je automaticky považována za 1.

Syntaxe

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

Příklad

Nastavme našemu 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;
}

Результат:

Příklad

A nyní zvýšíme jas obrázku 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;
}

Результат:

Příklad

Nastavme našemu 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;
}

Результат:

Viz také