CSS filter attribute

  • πρόηγούμενη σελίδα empty-cells
  • Επόμενη σελίδα flex

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

Το ατρβούτο filter ορίζει τις視覺效果 (όπως blur και saturation) του στοιχείου (γενικά <img>).

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

Εκμάθηση CSS:Εικόνες CSS

Εγχειρίδιο αναφοράς HTML DOM:Ατрибούτο filter

Παράδειγμα

Για να μετατρέψετε όλες τις εικόνες σε ασπρόμαυρη (100% γκρι):

img {
  filter: grayscale(100%);
}

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

Συμβουλή:Μπορείτε να βρείτε περισσότερες TIY παραδείγματα στο κάτω μέρος της σελίδας.

CSS γραμματική

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Συμβουλή:Για να χρησιμοποιήσετε πολλαπλά φίλτρα, διαχωρίστε κάθε φίλτρο με κενά (βλέπε περισσότερες παραδείγματα στο κάτω μέρος της σελίδας).

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

Προεπιλεγμένη τιμή: none
Κληρονομικότητα: Όχι
Ανίμαση: Υποστήριξη. Δείτε:Αναλογικά με τις ιδιότητες της αニμασιών。
Έκδοση: CSS3
Γλώσσα σύνταξης JavaScript: object.style.filter="grayscale(100%)"

Φίλτρο συνάρτηση

Σημείωση:Χρησιμοποιήστε ποσοστό από το 100% (π.χ. 75%) για το φίλτρο, αποδέχεται επίσης την τιμή ως δεκαδικό (π.χ. 0.75).

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

Εφαρμόστε οπτική φακό στη σκιά. Ο μεγαλύτερος ο δείκτης, τόσο μεγαλύτερη η οπτική φακός που δημιουργείται.

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

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

  • 0% θα κάνει την εικόνα πλήρως μαύρη.
  • Η προεπιλεγμένη τιμή είναι 100%, αντιπροσωπεύει την αρχική εικόνα.
  • Τιμές πάνω από 100% θα παρέχουν πιο φωτεινά αποτελέσματα.
contrast(%)

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

  • 0% θα κάνει την εικόνα πλήρως μαύρη.
  • Η προεπιλεγμένη τιμή είναι 100%, αντιπροσωπεύει την αρχική εικόνα.
  • Τιμές πάνω από 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 - προαιρετικό. Προσθέτει χρώμα στη σκιά. Αν δεν καθοριστεί, το χρώμα εξαρτάται από τον περιηγητή (συνήθως μαύρο).

Αυτή η παράδειγμα δημιουργεί σκιές κόκκινου χρώματος, οριζόντια και κάθετη κατεύθυνση 8px, με 10px οπτικό φακό:

filter: σκιές(8px 8px 10px κόκκινο);

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

Μετατροπή της εικόνας σε γκρίζα.

  • 0% (0) είναι η προεπιλεγμένη τιμή και αντιπροσωπεύει την αρχική εικόνα.
  • 100％ θα μετατρέψει την εικόνα πλήρως σε γκρίζα (για γκρίζες εικόνες).

Σημείωση:Δεν επιτρέπονται αρνητικές τιμές.
γυαλίσματα χρώματος(deg);

Εφαρμογή γυαλίσματος χρώματος στην εικόνα. Η τιμή καθορίζει το βαθμό του κύκλου των χρωμάτων. Η προεπιλεγμένη τιμή είναι 0deg και αντιπροσωπεύει την αρχική εικόνα.

Σημείωση:Η μέγιστη τιμή είναι 360deg.
αντιστροφή(%%);

Αντιστροφή των δειγμάτων στην εικόνα.

  • 0% (0) είναι η προεπιλεγμένη τιμή και αντιπροσωπεύει την αρχική εικόνα.
  • 100％ θα μετατρέψει την εικόνα πλήρως σε αντιστροφή.

Σημείωση:Δεν επιτρέπονται αρνητικές τιμές.
διαφάνεια(%%);

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

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

Σημείωση:Δεν επιτρέπονται αρνητικές τιμές.

Συμβουλή:Αυτό το φίλτρο είναι παρόμοιο με την ιδιότητα opacity.
υπερσaturaτίωση(%%);

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

  • 0% (0) θα κάνει την εικόνα πλήρως ανυπερσaturaτισμένη.
  • 100% είναι η προεπιλεγμένη τιμή και αντιπροσωπεύει την αρχική εικόνα.
  • Τιμές πάνω από το 100% παρέχουν υπερ-υπερσaturaταρισμένα αποτελέσματα.

Σημείωση:Δεν επιτρέπονται αρνητικές τιμές.
sepia(%%);

Μετατροπή της εικόνας σε καφέ.

  • 0% (0) είναι η προεπιλεγμένη τιμή και αντιπροσωπεύει την αρχική εικόνα.
  • 100％ θα μετατρέψει την εικόνα πλήρως σε καφέ.

Σημείωση:Δεν επιτρέπονται αρνητικές τιμές.
url();

Η συνάρτηση url() αποδέχεται τη θέση του αρχείου XML των φίλτρων SVG και μπορεί να περιέχει αγκύρες που δείχνουν στο συγκεκριμένο στοιχείο του φίλτρου. Παράδειγμα:

filter: url(svg-url#element-id);
αρχικό ριζάρωση αυτής της ιδιότητας στη βασική της τιμή. Δείτε αρχικό。
υποκλήρωση υποκλήρωση από το γονικό στοιχείο του. Δείτε υποκλήρωση。

π更多的实例

παράδειγμα θολότητας

προσθέστε θολότητα στην εικόνα:

img {
  filter: θολότητα(5px);
}

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

παράδειγμα θολότητας 2

εφαρμογή θολής φόντου εικόνας:

img.background {
  filter: θολότητα(35px);
}

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

παράδειγμα φωτεινότητας

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

img {
  filter: φωτεινότητα(200%);
}

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

παράδειγμα αντίθεσης

ρυθμίστε την αντίθεση της εικόνας:

img {
  filter: αντίθεση(200%);
}

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

παράδειγμα σκιάς

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

img {
  filter: σκιές(8px 8px 10px γκρι);
}

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

Παράδειγμα ασπρόμαυρης κλίμακας

Μετατροπή της εικόνας σε ασπρόμαυρη κλίμακα:

img {
  filter: grayscale(50%);
}

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

Παράδειγμα γυαλιστώματος χρώματος

Εφαρμογή γυαλιστώματος χρώματος στην εικόνα:

img {
  filter: hue-rotate(90deg);
}

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

Παράδειγμα αντιστροφής

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

img {
  filter: invert(100%);
}

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

Παράδειγμα αδιαφάνειας

Ρύθμιση του επιπέδου αδιαφάνειας της εικόνας:

img {
  filter: opacity(30%);
}

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

Παράδειγμα σaturaσής

Ρύθμιση της σaturaσής της εικόνας:

img {
  filter: saturate(800%);
}

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

Παράδειγμα καφέ-γκρίζου

Μετατροπή της εικόνας σε καφέ-γκρίζο:

img {
  filter: sepia(100%);
}

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

Χρήση πολλαπλών φίλτρων

Για να χρησιμοποιήσετε πολλαπλά φίλτρα, διαχωρίστε τα με κενά. Παρακαλώ σημειώστε ότι η σειρά είναι σημαντική (π.χ., η χρήση grayscale() μετά από sepia() θα παράσχει πλήρως ασπρόμαυρη εικόνα):

img {
  filter: contrast(200%) brightness(150%);
}

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

Όλα τα φίλτρα

Παρουσίαση όλων των συνάρτησων φίλτρου:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

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

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

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

Αριθμοί με -webkit- υποδεικνύουν την πρώτη έκδοση που χρησιμοποιεί το πρόθεμα.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Σημείωση:Παλιότερες εκδόσεις του Internet Explorer (4.0 έως 8.0) υποστηρίζουν το εκλείψας μη τυποποιημένο "filter" χαρακτηριστικό. Όταν χρειάζεται υποστήριξη για το IE8 και πιο παλιά εκδόσεις, χρησιμοποιείται κυρίως για αδιαφάνεια.

  • πρόηγούμενη σελίδα empty-cells
  • Επόμενη σελίδα flex