CSS image-rendering ιδιότητα

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

image-rendering Η ιδιότητα καθορίζει τον τύπο του αλγορίθμου κλιμάκωσης που χρησιμοποιείται για την εικόνα.

Σημείωση:Αυτή η ιδιότητα δεν έχει εφαρμογή σε εικόνες που δεν συρρικνώνουν.

Παράδειγμα

Εμφανίζει τα διαφορετικά αλγόριθμοι κλιμάκωσης των εικόνων που είναι διαθέσιμα:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

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

Γλώσσα CSS

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Τιμή της ιδιότητας

Τιμή Περιγραφή
auto Αφήνει τον περιηγητή να επιλέξει τον αλγόριθμο κλιμάκωσης. Προεπιλεγμένη τιμή.
smooth Χρησιμοποιεί έναν αλγόριθμο για να μαλακώσει τα χρώματα της εικόνας.
high-quality Το ίδιο με το smooth, αλλά προτιμά την υψηλή ποιότητα της κλιμάκωσης.
crisp-edges Χρησιμοποιεί έναν αλγόριθμο για να διατηρήσει την αντίθεση και τα όρια της εικόνας.
pixelated

Αν το εικόνα μεγαλώνει, τότε χρησιμοποιείται το αλγόριθμο nearest-neighbor, οπότε η εικόνα θα φαίνεται να αποτελείται από μεγάλους像素.

Αν το εικόνα συρρικνώνεται, τότε είναι το ίδιο με το auto.
initial Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη τιμή της. Δείτε επίσης: initial.
inherit Κληρονομεί αυτή την ιδιότητα από το γονικό στοιχείο του. Δείτε επίσης: inherit.

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

Προεπιλεγμένη τιμή: auto
Προσέγγιση κληρονομικότητας: yes
Δημιουργία αニμάτισης: Δεν υποστηρίζεται. Δείτε επίσης:Συνημμένα στοιχεία της αニμάτισης.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.imageRendering="pixelated"

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

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

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge και Opera χρησιμοποιούν το -webkit-optimize-contrast ως εναλλακτικό όνομα για την τιμή crisp-edges.