CSS invert() συναρμογή

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

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

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

Παράδειγμα

Παράδειγμα 1

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

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Προσωπική δοκιμή

Παράδειγμα 2

θα invert() με backdrop-filter Χρήση των χαρακτηριστικών μαζί:

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

Προσωπική δοκιμή

Γλωσσικό CSS

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

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

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

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

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

Έκδοση: CSS Φίλτρο Εφέ Μονάδας 1

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

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

Παραδείγματα:Ενότητα CSS filter

Παραδείγματα:CSS blur() συναρμογή

Παραδείγματα:CSS brightnes() συναρμογή

Παραδείγματα:CSS kontrast() συναρμογή

Παραδείγματα:CSS drop-shadow() συναρμογή

Παραδείγματα:CSS grayscale() συναρμογή

Παραδείγματα:CSS hue-rotate() συναρμογή

Παραδείγματα:CSS αδιαφανής() συναρμογή

Παραδείγματα:CSS σaturați() συναρμογή

Παραδείγματα:CSS sepia() συναρτηση