Funkcja brightness

Funkcja brightness pozwala zmienić jasność obrazu tła. Oryginalna jasność tła jest określona wartością 100% lub 1, przy ich zmniejszeniu obniża się również jasność obrazu. Odpowiednio przy zwiększeniu wartości powyżej 100% jasność wzrasta. Wartości ujemne nie są stosowane, a pusta wartość jest automatycznie rozumiana jako 1.

Składnia

cssselektor {
  filter: brightness(liczba);
}

Przykład

Ustawmy dla naszego obrazu jasność 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;
}

Результат:

Przykład

A teraz zwiększmy jasność obrazu do 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;
}

Результат:

Przykład

Ustawmy dla naszego obrazu oryginalną jasność:

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

Результат:

Zobacz też