Η συνάρτηση grayscale() της CSS

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

Η CSS grayscale() Η συνάρτηση φίλτρου μετατρέπει την εικόνα σε σκοτεινή.

  • 100% (ή 1) κάνει την εικόνα πλήρως σκοτεινή
  • 0% (ή 0) δεν έχει αποτέλεσμα

Παράδειγμα

Παράδειγμα 1

Ρύθμιση διαφορετικών τιμών της κλίμακας της σκοτεινιάς για τις εικόνες:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

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

Παράδειγμα 2

μετατρέπει grayscale() με backdrop-filter Χρήση συνδυασμένων χαρακτηριστικών:

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

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

Γλωσσική συντακτική του CSS

grayscale(amount)
Τιμή Περιγραφή
amount

Προαιρετικό. Ορίζει την τιμή της κλίμακας της σκοτεινιάς, μπορεί να είναι αριθμός ή ποσοστό.

100% (ή 1) κάνει το στοιχείο πλήρως σκοτεινό.

0% (ή 0) υποδηλώνει το αρχικό εικόνα (χωρίς αποτέλεσμα).

Η προεπιλεγμένη τιμή είναι 1.

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

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

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

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

Αναφορά:CSS filter ιδιότητα

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

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

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

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

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

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

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

Αναφορά:Λειτουργία CSS saturate()

Αναφορά:Λειτουργία CSS sepia()