Funkcija brightness

Funkcija brightness omogućava promenu osvetljenja pozadinske slike. Originalno osvetljenje pozadine određeno je vrednošću 100% ili 1, pri njihovom smanjenju smanjuje se i osvetljenje slike. Shodno tome pri povećanju vrednosti iznad 100% osvetljenje se povećava. Negativne vrednosti se ne primenjuju, a prazna vrednost automatski se tumači kao 1.

Sintaksa

cssselektor {
  filter: brightness(broj);
}

Primer

Hajde da postavimo za našu sliku osvetljenje 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;
}

Результат:

Primer

A sada hajde da povećamo osvetljenje slike 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;
}

Результат:

Primer

Hajde da postavimo za našu sliku originalno osvetljenje:

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

Результат:

Vidite takođe