Υπάρχουν ιδιότητες CSS, όπως εικόνες φόντου, εικόνες περιγράμματος, κάλυψη και ιδιότητες αποκοπής, με τις οποίες μπορείτε προσθέστε απευθείας εικόνες σε ιστοσελίδες και να ελέγχουν τη συμπεριφορά τους. Ωστόσο, υπάρχουν επίσης λιγότερο συχνά αναφερόμενες ιδιότητες CSS που σχετίζονται με την εικόνα εργασία σε εικόνες που προστέθηκαν με το Ετικέτα HTML, που είναι ο προτιμώμενος τρόπος προσθήκης εικόνων σε ιστοσελίδες.
Η περιγραφή εργασίας αυτών των τελευταίων ιδιοτήτων ποικίλλει από έλεγχο της σκιάς εικόνας προς το ορίζοντας την ευκρίνεια, βοηθώντας μας να ελέγξουμε καλύτερα την εμφάνιση και τη θέση των εικόνων που προστέθηκαν με το ετικέτα. Ας δούμε τους ένα προς ένα.
1. Ακονίστε τις εικόνες με απεικόνιση εικόνας
Όταν μια εικόνα έχει αναβαθμιστεί, το πρόγραμμα περιήγησης εξομαλύνει την εικόνα, έτσι δεν φαίνεται pixelated. Αλλά, ανάλογα με την ανάλυση της εικόνας και της οθόνης, αυτό μπορεί να μην είναι το καλύτερο ανά πάσα στιγμή. Μπορείτε να ελέγξετε τη συμπεριφορά του προγράμματος περιήγησης με το απεικόνιση εικόνας ιδιοκτησία.
Αυτή η καλά υποστηριζόμενη ιδιοκτησία ελέγχει τον αλγόριθμο που χρησιμοποιείται για την κλιμάκωση μιας εικόνας. Οι δύο κύριες αξίες είναι τραγανές άκρες και pixelated.
ο τραγανές άκρες αξία διατηρεί την αντίθεση χρώματος μεταξύ εικονοστοιχείων. Με άλλα λόγια, δεν γίνεται εξομάλυνση στις εικόνες, η οποία μεγάλη για έργα τέχνης pixel.
Πότε pixelated χρησιμοποιείται, τα κοντινά εικονοστοιχεία ενός εικονοστοιχείου ίσως πάρει την εμφάνισή του, κάνοντας το να φαίνεται σαν μαζί σχηματίζουν ένα μεγάλο pixel, ιδανικό για οθόνες υψηλής ανάλυσης.
Εάν συνεχίζετε να ψάχνετε προσεκτικά τις άκρες των λουλουδιών στο GIF παρακάτω, μπορείτε να δείτε τη διαφορά μεταξύ ενός κανονικού και ενός a pixelated εικόνα.
img απεικόνιση εικόνας: pixelated;
2. Τεντώστε τις εικόνες με αντικειμενική εφαρμογή
ο περιέχω, κάλυμμα, γέμισμα όλες οι αξίες είναι γνωστές, τις χρησιμοποιούμε για το μέγεθος φόντου ιδιότητα που ελέγχει τον τρόπο με τον οποίο μια εικόνα φόντου γεμίζει το στοιχείο στο οποίο ανήκει. ο αντικειμενική εφαρμογή ιδιοκτησία είναι αρκετά παρόμοια με αυτό, όπως επίσης καθορίζει πώς ένα μέγεθος εικόνας μέσα στο δοχείο του.
ο περιέχω αξία περιέχει την εικόνα μέσα στο δοχείο. κάλυμμα κάνει το ίδιο, αλλά αν ο λόγος διαστάσεων της εικόνας και του δοχείου δεν ταιριάζει, το η εικόνα αποσπάται. γέμισμα προκαλεί την εικόνα τεντώστε και γεμίστε το δοχείο του. μείωσηεπιλέγει τη μικρότερη έκδοση της εικόνας για εμφάνιση.
Ομοίως με το συμπληρωματικό φόντο-θέση Ιδιοκτησία του μέγεθος φόντου, υπάρχει ένα αντικείμενο-θέση ιδιοκτησία για αντικειμενική εφαρμογή, πολύ.
ο αντικειμενική εφαρμογή ιδιοκτησία μετακινεί μια εικόνα μέσα σε ένα δοχείο εικόνας στις δεδομένες συντεταγμένες. Οι συντεταγμένες μπορούν να οριστούν ως μονάδες απόλυτου μήκους, μονάδες σχετικού μήκους, λέξεις-κλειδιά (μπλουζα, αριστερά, κέντρο, κάτω μέρος, και σωστά), ή a έγκυρο συνδυασμό τους (top 20px δεξιά 5px, δεξιά δεξιά 80χλμ).
4. Τοποθετήστε τις εικόνες με κατακόρυφη ευθυγράμμιση
Μερικές φορές προσθέτουμε (οι οποίες είναι εγγενώς από τη φύση τους), δίπλα σε χορδές κειμένου για πρόσθετες πληροφορίες ή διακόσμηση. Σε αυτή την περίπτωση, ευθυγραμμίζοντας το κείμενο και την εικόνα στην επιθυμητή θέση μπορεί να είναι λίγο δύσκολο - αν δεν ξέρετε ποια ιδιότητα να χρησιμοποιήσετε.
ο κατακόρυφη ευθυγράμμιση ιδιοκτησία είναι όχι αποκλειστικά για να τροφοδοτούν τα κύτταρα μόνο. Μπορεί επίσης να ευθυγραμμίσει ένα στοιχείο inline μέσα σε ένα κιβώτιο εισόδου, και έτσι μπορεί να χρησιμοποιηθεί για να ευθυγραμμίστε μια εικόνα σε μια γραμμή κειμένου. Παίρνει ένα δίκαιο αριθμό τιμών που μπορούν να εφαρμοστούν σε ένα στοιχείο inline, έτσι έχετε πολλές επιλογές από τις οποίες μπορείτε να επιλέξετε.
PDF
5. Σκιά εικόνες με φίλτρο: drop-shadow ()
Όταν χρησιμοποιούνται με ακρίβεια σε κείμενα και κουτιά, οι σκιές μπορούν να προσθέσουν ζωή σε μια ιστοσελίδα. Το ίδιο ισχύει και για τις εικόνες. Εικόνες με σχήματα πυρήνα και διαφανή φόντα μπορούν να επωφεληθούν από το σκίαση Φίλτρο CSS.
Τα επιχειρήματά της είναι παρόμοια με τις τιμές των ιδιοτήτων CSS που σχετίζονται με τη σκιά (σκιά κειμένου, κουτί-σκιά). Τα πρώτα δύο αντιπροσωπεύουν το κατακόρυφη και οριζόντια απόσταση ανάμεσα στις σκιές και την εικόνα, το τρίτο και το τέταρτο είναι οι θολούρα και το ακτίνα διάδοσης της σκιάς, και το τελευταίο είναι το χρώμα σκιάς.
Οπως ακριβώς σκιά κειμένου, σκίαση δημιουργεί επίσης μια σκιά που είναι διαμορφωμένο στο αντικείμενό του. Έτσι, όταν εφαρμόζεται σε μια εικόνα, η σκιά παίρνει το σχήμα του ορατού τμήματος της εικόνας.
#container width: 300px; ύψος: 300px; img πλάτος: 100%; ύψος: 100%. αντικειμενοφόρο: περιέχει?
#container width: 300px; ύψος: 300px; img πλάτος: 100%; ύψος: 100%. αντικειμενοφόρο: περιέχει? 
