Κοιτάξτε δημοφιλείς ιστότοπους σήμερα και μια επεξεργασία σχεδίασης που είστε σίγουροι ότι θα δείτε είναι μεγάλες εικόνες οθόνης. Μία από τις προκλήσεις με την προσθήκη αυτών των εικόνων προέρχεται από την καλύτερη πρακτική που οι ιστοτόποι πρέπει να ανταποκρίνονται σε διαφορετικά μεγέθη και συσκευές οθόνης - μια προσέγγιση που είναι γνωστή ως σχεδιαζόμενος σχεδιασμός ιστοσελίδων.
Εφόσον η διάταξη του ιστότοπού σας αλλάζει και κλιμακώνεται με διαφορετικά μεγέθη οθόνης, πρέπει και αυτές οι εικόνες φόντου να προσαρμόζουν ανάλογα το μέγεθος τους. Στην πραγματικότητα, αυτές οι "υγρές εικόνες" είναι ένα από τα βασικά κομμάτια των ανταποκρινόμενων ιστοτόπων (μαζί με ένα δίκτυο υγρών και τα ερωτήματα των μέσων ενημέρωσης). Αυτά τα τρία κομμάτια έχουν βασιστεί στο σχεδιασμό ιστοσελίδων από την αρχή, αλλά ενώ ήταν πάντα εύκολο να προσθέσετε απόκριες εικόνες inline σε έναν ιστότοπο (οι ενσωματωμένες εικόνες είναι τα γραφικά που κωδικοποιούνται ως τμήμα της σήμανσης HTML), κάνοντας το το ίδιο με τις εικόνες φόντου (οι οποίες έχουν σχεδιαστεί στη σελίδα χρησιμοποιώντας τις ιδιότητες φόντου CSS) έχει παράσχει εδώ και καιρό μια σημαντική πρόκληση σε πολλούς σχεδιαστές ιστοσελίδων και προγραμματιστές στο μπροστινό μέρος. Ευτυχώς, η προσθήκη της ιδιότητας "μεγέθους φόντου" στο CSS έχει καταστήσει αυτό δυνατό.
Σε ξεχωριστό άρθρο, κάλυψα τον τρόπο χρήσης της ιδιότητας CSS3 μέγεθος φόντου να τεντώσετε τις εικόνες για να ταιριάζουν σε ένα παράθυρο, αλλά υπάρχει ένας ακόμα καλύτερος, πιο χρήσιμος τρόπος για την ανάπτυξη για αυτήν την ιδιοκτησία. Για να γίνει αυτό, θα χρησιμοποιήσουμε τον ακόλουθο συνδυασμό ιδιοτήτων και αξίας:
μέγεθος φόντου: κάλυμμα;
ο κάλυμμα η ιδιότητα λέξεων-κλειδιών λέει στο πρόγραμμα περιήγησης να μεγεθύνει την εικόνα ώστε να ταιριάζει στο παράθυρο, ανεξάρτητα από το πόσο μεγάλο ή μικρό το παράθυρο παίρνει. Η εικόνα κλιμακώνεται για να καλύψει ολόκληρη την οθόνη, αλλά οι αρχικές αναλογίες και ο λόγος διαστάσεων διατηρούνται άθικτες, εμποδίζοντας την παραμόρφωση της ίδιας της εικόνας. Η εικόνα τοποθετείται στο παράθυρο όσο το δυνατόν μεγαλύτερη, ώστε να καλύπτεται ολόκληρη η επιφάνεια του παραθύρου. Αυτό σημαίνει ότι δεν θα έχετε κενά σημεία στη σελίδα σας ή οποιαδήποτε παραμόρφωση στην εικόνα, αλλά σημαίνει επίσης ότι κάποια εικόνα μπορεί να περικοπεί ανάλογα με τον λόγο διαστάσεων της οθόνης και της εν λόγω εικόνας. Για παράδειγμα, οι άκρες μιας εικόνας (πάνω, κάτω, αριστερά ή δεξιά) μπορεί να αποκόπτονται στις εικόνες, ανάλογα με τις τιμές που χρησιμοποιείτε για την ιδιότητα θέσης φόντου. Εάν προσανατολίζετε το φόντο στο "πάνω αριστερά", οποιαδήποτε πλεονάζουσα εικόνα θα βγει από την κάτω και τη δεξιά πλευρά. Εάν εστιάσετε την εικόνα φόντου, η περίσσεια θα απογειωθεί από όλες τις πλευρές, αλλά καθώς η περίσσεια αυτή είναι απλωμένη, η επίπτωση σε οποιαδήποτε πλευρά θα είναι λιγότερο εξυπηρετική.
Πώς να χρησιμοποιήσετε μέγεθος φόντου: κάλυμμα;
Όταν δημιουργείτε την εικόνα φόντου, είναι καλή ιδέα να δημιουργήσετε μια εικόνα αρκετά μεγάλη. Ενώ τα προγράμματα περιήγησης μπορούν να μειώσουν την εικόνα χωρίς να έχουν αξιοσημείωτο αντίκτυπο στην οπτική ποιότητα, όταν ένα πρόγραμμα περιήγησης κλιμακώνει μια εικόνα σε μέγεθος μεγαλύτερο από τις αρχικές της διαστάσεις, η οπτική ποιότητα θα υποβαθμιστεί, θα γίνει θολωτή και με εικονοστοιχεία. Το μειονέκτημα σε αυτό είναι ότι η σελίδα σας παίρνει ένα χτύπημα απόδοσης όταν παραδίδετε γιγαντιαίες εικόνες σε όλες τις οθόνες. Όταν το κάνετε αυτό, φροντίστε να προετοιμάσετε σωστά αυτές τις εικόνες για ταχύτητα λήψης και παράδοση στο διαδίκτυο. Στο τέλος, θα πρέπει να βρείτε το ευτυχισμένο μέσο μεταξύ ενός αρκετά μεγάλου μεγέθους εικόνας και ποιότητας και ενός λογικού μεγέθους αρχείου για ταχύτητες λήψης.
Ένας από τους συνήθεις τρόπους χρήσης των εικόνων φόντου κλιμάκωσης είναι όταν θέλετε αυτή η εικόνα να αναπαράγει το πλήρες φόντο μιας σελίδας, είτε αυτή η σελίδα είναι ευρεία και προβάλλεται σε έναν επιτραπέζιο υπολογιστή είτε πολύ μικρότερη και αποστέλλεται σε φορητό, κινητό συσκευές.
Μεταφορτώστε την εικόνα σας στον κεντρικό υπολογιστή σας και προσθέστε την στο CSS ως εικόνα φόντου:
εικόνα-φόντου: url (πυροτεχνήματα-πάνω-wdw.jpg);αναπαράσταση φόντου: όχι-επανάληψηφόντο-θέση: κέντρο κέντρο?προσάρτηση φόντου: σταθερή.
Προσθέστε πρώτα το πρόθεμα CSS του προγράμματος περιήγησης:
-webkit-φόντο-μέγεθος: κάλυμμα;-moz-φόντο-μέγεθος: κάλυμμα;-o-φόντο-μέγεθος: κάλυμμα;
Στη συνέχεια, προσθέστε την ιδιότητα CSS:
μέγεθος φόντου: κάλυμμα;
Χρησιμοποιώντας διαφορετικές εικόνες που ταιριάζουν σε διαφορετικές συσκευές
Παρόλο που ο σχεδιασμός που ανταποκρίνεται στην επιφάνεια εργασίας ή την εμπειρία φορητού υπολογιστή είναι σημαντικός, η ποικιλία συσκευών που έχουν πρόσβαση στον Ιστό έχει αυξηθεί σημαντικά και υπάρχει μεγαλύτερη ποικιλία μεγεθών οθόνης.
Όπως αναφέρθηκε προηγουμένως, η φόρτωση μιας πολύ μεγάλης αντανακλαστικής εικόνας φόντου σε ένα smartphone, για παράδειγμα, δεν είναι ένα αποδοτικό ή ευρυζωνικό σχεδιασμό.
Μάθετε πώς μπορείτε να χρησιμοποιήσετε τα ερωτήματα μέσων για την προβολή εικόνων που θα είναι κατάλληλες για τις συσκευές στις οποίες θα προβληθούν και να βελτιώσετε περαιτέρω τη συμβατότητα του ιστότοπού σας με τις κινητές συσκευές.
