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

selektor {
	filter: brightness(broj);
}

Primer

Hajde da postavimo za našu sliku osvetljenje na 20%:

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

#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%:

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

#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:

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

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

Vidite takođe

funkcija blur,
koja zamućuje pozadinu
funkcija contrast,
koja zadaje kontrast pozadini
funkcija drop-shadow,
koja zadaje senku pozadini
funkcija hue-rotate,
koja zadaje nijansu boje pozadini
funkcija invert,
koja invertuje boje pozadine
funkcija opacity,
koja zadaje providnost pozadini
funkcija sepia,
koja transformiše pozadinu u sepiu
svojstvo background,
koje predstavlja skraćeno svojstvo za pozadinu
svojstvo background-image,
pomoću koga se bloku može zadati pozadinska slika
svojstvo filter,
koje zadaje stil za pozadinu