Ιδιότητα φίλτρου στυλ

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

φίλτρο Προσθέστε οπτικά εφέ στην εικόνα (π.χ. rozmazání και διαστροφή).

Δείτε επίσης:

Εγχειρίδιο CSSΙδιότητα φίλτρου

Παράδειγμα

Αλλάξτε τον χρώμα της εικόνας σε ασπρόμαυρο (100% γκρίζα):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Προσπαθήστε το προσωπικά

Γραμματική

Επιστροφή της ιδιότητας φίλτρου:

ότικετ.style.filter

Ρύθμιση της ιδιότητας φίλτρου:

ότικετ.style.filter = "μηδέν | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Λειτουργία φίλτρου

Σχόλια:Το φίλτρο που χρησιμοποιείται με ποσοστό τοις εκατό (π.χ. 75%) αποδέχεται επίσης δεκαδικούς αριθμούς (δηλαδή 0.75).

Φίλτρο Περιγραφή
μηδέν Καθορίζεται χωρίς αποτέλεσμα.
blur(px)

Εφαρμόστε το εφέ rozmazání στην εικόνα. Η μεγαλύτερη τιμή προκαλεί περισσότερο rozmazání.

Αν δεν καθοριστεί τιμή, θα χρησιμοποιηθεί 0.
brightness(%)

Ρυθμίστε τη φωτεινότητα της εικόνας.

0% θα κάνει την εικόνα πλήρως μαύρη.

100% (1) είναι η προεπιλεγμένη τιμή, που υποδηλώνει την αρχική εικόνα.

Τιμές πάνω από 100% θα παρέχουν πιο φωτεινά αποτελέσματα.
contrast(%)

Ρυθμίστε την αντίθεση της εικόνας.

0% θα κάνει την εικόνα πλήρως μαύρη.

100% (1) είναι η προεπιλεγμένη τιμή, που υποδηλώνει την αρχική εικόνα.

Τιμές πάνω από 100% θα παρέχουν χαμηλότερη αντίθεση.
drop-shadow(h-shadow v-shadow blur spread color)

Εφαρμόστε οπτική σκιά στην εικόνα.

Πιθανές τιμές:

h-shadow - απαραίτητο. Καθορίστε το μήκος της σκιάς σε pixel. Η αρνητική τιμή θα τοποθετήσει τη σκιά αριστερά από την εικόνα.

v-shadow - απαραίτητο. Καθορίστε το πλάτος της σκιάς σε pixel. Η αρνητική τιμή θα τοποθετήσει τη σκιά πάνω από την εικόνα.

blur - προαιρετικό. Η τρίτη τιμή, πρέπει να είναι σε pixel. Προσθέστε διαφάνεια στη σκιά. Οι μεγαλύτερες τιμές θα δημιουργήσουν περισσότερη διαφάνεια (η σκιά θα γίνει μεγαλύτερη και πιο αχνή). Δεν επιτρέπεται η χρήση αρνητικών τιμών. Αν δεν καθοριστεί τιμή, θα χρησιμοποιηθεί 0 (η σκιά θα έχει οξυσμένες άκρες).

spread - προαιρετικό. Η τέταρτη τιμή, πρέπει να είναι σε pixel. Η θετική τιμή θα μεγαλώσει και θα διευρύνει τη σκιά, ενώ η αρνητική τιμή θα συρρικνώσει και θα μικρύνει τη σκιά. Αν δεν καθοριστεί, θα είναι 0 (η σκιά θα είναι ίση με το μέγεθος του στοιχείου).

Σχόλια:Chrome, Safari και Opera, μπορεί να μην υποστηρίζουν το τέταρτο μήκος; Αν προσστείτε το, δεν θα εμφανιστεί.

color: προαιρετικό. Προσθέστε χρώμα στη σκιά. Αν δεν καθοριστεί, το χρώμα εξαρτάται από τον περιηγητή (συνήθως μαύρο).

Συμβουλή:Αυτός ο φίλτρο είναι παρόμοιος με την ιδιότητα του box-shadow.
grayscale(%)

Μετατρέψτε την εικόνα σε γκρίζα.

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

100% θα κάνει την εικόνα πλήρως γκρίζα (για λευκομαύρες εικόνες).

Σχόλια:Δεν επιτρέπεται η αρνητική τιμή.
hue-rotate(deg)

Εφαρμόστε γυαλιστόχρωμο γύρω από την εικόνα. Αυτό το όρισμα καθορίζει τα μοτίβα που θα προσαρμοστούν γύρω από τον κύκλο των χρωμάτων.

0deg είναι η προεπιλεγμένη τιμή, που υποδηλώνει την αρχική εικόνα.

Σχόλια:Το μέγιστο όριο είναι 360 μοίρες.
invert(%)

Αντιστρέψτε τα δείγματα της εικόνας.

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

100% θα κάνει την εικόνα πλήρως αντιστρεπτική.

Σχόλια:Δεν επιτρέπεται η αρνητική τιμή.
opacity(%)

Ρυθμίστε το επίπεδο αδιαφάνειας της εικόνας. Το επίπεδο αδιαφάνειας περιγράφει το επίπεδο διαφάνειας, όπου:

0% είναι πλήρως διαφανές.

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

Σχόλια:Δεν επιτρέπεται η αρνητική τιμή.

Συμβουλή:Αυτός ο φίλτρο είναι παρόμοιος με την ιδιότητα της αδιαφάνειας.
saturate(%)

Ρυθμίστε την συμπυκνότητα της εικόνας.

0% (0) θα κάνει την εικόνα πλήρως ανυποχώρητη.

100% είναι η προεπιλεγμένη τιμή, που υποδηλώνει την αρχική εικόνα.

Αντίστοιχα, τιμές πάνω από 100% θα παρέχουν υπερσυμπυκνωμένα αποτελέσματα.

Σχόλια:Δεν επιτρέπεται η αρνητική τιμή.
sepia(%)

Μετατρέψτε την εικόνα σε καφέ.

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

100% θα κάνει την εικόνα πλήρως καφέ.

Σχόλια:Δεν επιτρέπεται η αρνητική τιμή.

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

Έκδοση CSS: CSS3

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0