Συνάρτηση brightness

Η συνάρτηση brightness επιτρέπει την αλλαγή της φωτεινότητας μιας εικόνας φόντου. Η αρχική φωτεινότητα του φόντου καθορίζεται από την τιμή 100% ή 1, με τη μείωσή τους μειώνεται και η φωτεινότητα της εικόνας. Αντίστοιχα, με την αύξηση της τιμής πάνω από 100% η φωτεινότητα αυξάνεται. Οι αρνητικές τιμές δεν εφαρμόζονται, και μια κενή τιμή αυτόματα γίνεται αντιληπτή ως 1.

Σύνταξη

cssεπιλογέας {
  filter: brightness(αριθμός);
}

Παράδειγμα

Ας ορίσουμε για την εικόνα μας φωτεινότητα 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;
}

Результат:

Παράδειγμα

Και τώρα ας αυξήσουμε τη φωτεινότητα της εικόνας σε 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;
}

Результат:

Παράδειγμα

Ας ορίσουμε για την εικόνα μας την αρχική φωτεινότητα:

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

Результат:

Δείτε επίσης