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