🎚️Γεννήτρια CSS Filter

Συναρτήσεις και μονάδες filter

Η ιδιότητα CSS filter είναι μια ιδιότητα που εφαρμόζει εφέ στην εμφάνιση εικόνων ή στοιχείων, γράφοντας συναρτήσεις όπως blur και sepia διαχωρισμένες με κενό.

• px (pixel)：Η συναρτήση blur καθορίζει την ακτίνα θόλωσης σε px. Καθορίζοντας 4px, τα χρώματα αναμιγνύονται σε ακτίνα 4 pixel.
• % (τοις εκατό)：Οι συναρτήσεις brightness και sepia καθορίζουν την ισχύ του εφέ σε %. Για brightness, 100% είναι η αρχική φωτεινότητα και 120% είναι 20% φωτεινότερη.
• deg (μοίρες)：Η συναρτήση hue-rotate καθορίζει τη γωνία περιστροφής του χρώματος στο χρωματικό δακτύλιο σε deg. Καθορίζοντας 180deg, το χρώμα μετακινείται προς την αντίθετη απόχρωση.

Γιατί το αποτέλεσμα αλλάζει με διαφορετική σειρά γραφής

Οι συναρτήσεις στο filter εφαρμόζονται από αριστερά προς τα δεξιά, και κάθε επόμενο εφέ εφαρμόζεται στο αποτέλεσμα του προηγούμενου. Επομένως, η αλλαγή της σειράς μπορεί να αλλάξει την εμφάνιση. Για παράδειγμα, εφαρμόζοντας sepia μετά τη μετατροπή σε ασπρόμαυρο αφήνει καστανό χρώμα, αλλά εφαρμόζοντας sepia πρώτα και μετά ασπρόμαυρο αφαιρεί το καστανό. Αυτό το εργαλείο έχει σταθερή σειρά εφαρμογής, αλλά μπορείτε να αλλάξετε τη σειρά επεξεργάζοντας τον παραγόμενο κώδικα CSS.

Διαφορά από backdrop-filter

Τα filter και backdrop-filter είναι ιδιότητες που χρησιμοποιούν τις ίδιες συναρτήσεις, αλλά διαφέρουν ως προς το που εφαρμόζεται το εφέ.

• filter：Το filter είναι μια ιδιότητα που εφαρμόζει εφέ στην εμφάνιση του καθορισμένου στοιχείου (εικόνες, κείμενο κ.λπ.).
• backdrop-filter：Το backdrop-filter είναι μια ιδιότητα που εφαρμόζει εφέ στο τμήμα που φαίνεται πίσω από το καθορισμένο στοιχείο και χρησιμοποιείται για εφέ όπως το frosted glass.