CSS brightness() συνάρτηση

ορισμός και χρήση

Η CSS brightness() Οι συνάρτησεις φίλτρου χρησιμοποιούνται για την ρύθμιση της φωτεινότητας του στοιχείου.

  • Το 0% κάνει την εικόνα πλήρως μαύρη
  • Το 100%（ή 1）είναι η προεπιλεγμένη τιμή και σημαίνει την αρχική εικόνα
  • τιμές πάνω από 100% κάνουν την εικόνα πιο φωτεινή
  • τιμές κάτω από 100% κάνουν την εικόνα πιο σκοτεινή

παράδειγμα

παράδειγμα 1

κανέλα την εικόνα πιο φωτεινή ή πιο σκοτεινή:

#img1 {
  filter: brightness(150%);
}
#img2 {
  filter: brightness(50%);
}

δοκιμάστε το προσωπικά

παράδειγμα 2

μετατρέπει brightness() με backdrop-filter συνδυασμός χαρακτηριστικών:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: brightness(150%);
  backdrop-filter: brightness(150%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

δοκιμάστε το προσωπικά

CSS γραμματική

brightness(amount)
τιμή περιγραφή
amount

προαιρετικό. Καθορίζει την τιμή φωτεινότητας, μπορεί να είναι αριθμός ή ποσοστό.

Το 0% κάνει το στοιχείο πλήρως μαύρο. Το 100%（ή 1）είναι η προεπιλεγμένη τιμή και σημαίνει την αρχική εικόνα (χωρίς εφέ).

Τα τιμές πάνω από 100% κάνουν την εικόνα πιο φωτεινή.

τεχνικά λεπτομέρειες

Έκδοση: CSS Filter Effects Module Level 1

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη στήλη τάμπλου δείχνουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτή τη συνάρτηση πλήρως.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

σχετικές σελίδες

Αναφορά:CSS filter attribute

Αναφορά:Η συνάρτηση blur() του CSS

Αναφορά:CSS contrast() συνάρτηση

Αναφορά:CSS drop-shadow() συνάρτηση

Αναφορά:CSS grayscale() συνάρτηση

Αναφορά:CSS hue-rotate() συνάρτηση

Αναφορά:CSS invert() συνάρτηση

Αναφορά:CSS οπτικότητα() συνάρτηση

Αναφορά:Η συνάρτηση saturate() του CSS

Αναφορά:Η συνάρτηση sepia() του CSS