Συνάρτηση brightness
Η συνάρτηση brightness επιτρέπει την αλλαγή
της φωτεινότητας μιας εικόνας φόντου. Η αρχική φωτεινότητα
του φόντου καθορίζεται από την τιμή 100% ή 1,
με τη μείωσή τους μειώνεται και η φωτεινότητα της εικόνας.
Αντίστοιχα, με την αύξηση της τιμής πάνω από 100%
η φωτεινότητα αυξάνεται. Οι αρνητικές τιμές δεν εφαρμόζονται,
και μια κενή τιμή αυτόματα γίνεται αντιληπτή
ως 1.
Σύνταξη
επιλογέας {
filter: brightness(αριθμός);
}
Παράδειγμα
Ας ορίσουμε για την εικόνα μας φωτεινότητα
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;
}
:
Παράδειγμα
Και τώρα ας αυξήσουμε τη φωτεινότητα της εικόνας
σε 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;
}
:
Παράδειγμα
Ας ορίσουμε για την εικόνα μας την αρχική φωτεινότητα:
<div id="elem"></div>
#elem {
filter: brightness(1);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Δείτε επίσης
-
συνάρτηση
blur,
που θολώνει το φόντο -
συνάρτηση
contrast,
που ορίζει αντίθεση στο φόντο -
συνάρτηση
drop-shadow,
που ορίζει σκιά στο φόντο -
συνάρτηση
hue-rotate,
που ορίζει χρωματικότητα στο φόντο -
συνάρτηση
invert,
που αντιστρέφει τα χρώματα του φόντου -
συνάρτηση
opacity,
που ορίζει διαφάνεια στο φόντο -
συνάρτηση
sepia,
που μετατρέπει το φόντο σε σέπια -
ιδιότητα
background,
που είναι μια συντόμευση για το φόντο -
ιδιότητα
background-image,
με την οποία μπορεί να οριστεί εικόνα φόντου σε ένα μπλοκ -
ιδιότητα
filter,
που ορίζει στυλ για το φόντο