Funcția brightness

Funcția brightness permite modificarea luminozității imaginii de fundal. Luminozitatea inițială fundalului este determinată de valoarea 100% sau 1, prin scăderea acestora, luminozitatea imaginii scade. În consecință, atunci când valoarea crește peste 100% luminozitatea crește. Valorile negative nu se aplică, iar valoarea goală este automat percepută ca 1.

Sintaxă

cssselector {
  filter: brightness(număr);
}

Exemplu

Să setăm pentru imaginea noastră o luminozitate de 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;
}

Результат:

Exemplu

Și acum să creștem luminozitatea imaginii până la 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;
}

Результат:

Exemplu

Să setăm pentru imaginea noastră luminozitatea inițială:

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

Результат:

Vezi și