Φίλτρο σκηνικού - CSS-Κόλπα

Anonim

Το backdrop-filterακίνητο στο CSS χρησιμοποιείται για την εφαρμογή εφέ φίλτρου ( grayscale, contrast, blur, κλπ) με το φόντο / σκηνικό ενός στοιχείου. Το backdrop-filterέχει το ίδιο αποτέλεσμα με το filterακίνητο, εκτός από τα αποτελέσματα του φίλτρου που εφαρμόζεται μόνο στο παρασκήνιο και όχι στο περιεχόμενο του στοιχείου.

Κλασικό παράδειγμα:

Φιλτραρισμένα φόντα χωρίς φίλτρο φόντου

Πριν backdrop-filter, ο μόνος τρόπος για να προσθέσετε ένα φιλτραρισμένο φόντο ήταν να προσθέσετε ένα ξεχωριστό στοιχείο "φόντο", να το τοποθετήσετε πίσω από τα στοιχεία προσκηνίου και να το φιλτράρετε έτσι:

 
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

Η backdrop-filterιδιότητα σάς επιτρέπει να εξαλείψετε αυτό το επιπλέον στοιχείο "φόντο" και να εφαρμόσετε φίλτρα στο σκηνικό απευθείας:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

Κατά τη στιγμή της σύνταξης, backdrop-filterείναι μέρος του Προγράμματος επεξεργασίας του Filter Effects Module 2 και δεν είναι επίσημα μέρος οποιασδήποτε προδιαγραφής. Η υποστήριξη του προγράμματος περιήγησης είναι προς το παρόν περιορισμένη (βλ. «Υποστήριξη προγράμματος περιήγησης» παρακάτω).

Σύνταξη

.element ( backdrop-filter: ()* | none )

μπορεί να είναι οποιοδήποτε από τα ακόλουθα:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (για την εφαρμογή φίλτρων SVG)

Μπορείτε να εφαρμόσετε πολλαπλά δευτερόλεπτα σε ένα σκηνικό, όπως:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

Ανατρέξτε στο Πρόχειρο εργασίας της μονάδας εφέ φίλτρου W3C για αποδεκτές τιμές για καθεμία από τις λειτουργίες του φίλτρου.

Παράδειγμα

Για μια ολοκληρωμένη ματιά στις λειτουργίες φίλτρου και τους όμορφους τρόπους χρήσης τους μαζί, ανατρέξτε στην filterκαταχώριση almanac στο CSS-Tricks.

Το ακόλουθο στυλό διαμορφώνεται από ένα παράδειγμα στο άρθρο του Robin Rendle backdrop-filter.

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

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
76 Οχι Οχι 17 9 *

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Οχι 81 9.0-9.2 *

Σχετιζομαι με

  • filter

Πόροι

  • Η ιδιότητα φίλτρου σκηνικού από τον Robin Rendle
  • Καταχώρηση MDN στο φίλτρο σκηνικού