Funkcija brightness

Funkcija brightness ļauj mainīt fona attēla spilgtumu. Sākotnējais fona spilgtums tiek noteikts ar vērtību 100% vai 1, samazinot tās, samazinās arī attēla spilgtums. Attiecīgi, palielinot vērtību virs 100%, spilgtums palielinās. Negatīvas vērtības netiek lietotas, un tukša vērtība automātiski tiek uztverta kā 1.

Sintakse

cssselektors {
  filter: brightness(skaitlis);
}

Piemērs

Uzstādīsim mūsu attēlam spilgtumu uz 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;
}

Результат:

Piemērs

Tagad palielināsim attēla spilgtumu līdz 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;
}

Результат:

Piemērs

Uzstādīsim mūsu attēlam sākotnējo spilgtumu:

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

Результат:

Skatiet arī