CSS opacity() συναρτηση

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

CSS opacity() Οι συναρτήσεις φίλτρου χρησιμοποιούνται για την εφαρμογή του εφέ διαφάνειας στο στοιχείο.

  • 100%(ή 1)χωρίς εφέ
  • 50%(ή 0.5)κανάκι την ένδειξη 50% διαφανής
  • 0%(ή 0)κανάκι την ένδειξη πλήρως διαφανή

Παράδειγμα

Παράδειγμα 1

Θέστε διαφορετική διαφάνεια στις εικόνες:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

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

Παράδειγμα 2

θα opacity() με backdrop-filter Χρήση των ιδιοτήτων μαζί:

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

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

Γλώσσα CSS

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

Προαιρετικό. Προσδιορίζει το αριθμητικό ή το ποσοστό της διαφάνειας. Το 0%(ή 0)κανάκι την ένδειξη πλήρως διαφανή.

100%(ή 1)προσδιορίζει την αρχική εικόνα (χωρίς εφέ). Η προεπιλεγμένη τιμή είναι 1.

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

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

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

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

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

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

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

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

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

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

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

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

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

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