Πώς να εισαγάγετε μια εικόνα φόντου στο css. Φόντο σε CSS (χρώμα, θέση, εικόνα, επανάληψη, συνημμένο) - τα πάντα για τη ρύθμιση του χρώματος φόντου ή της εικόνας φόντου των στοιχείων Html. Εικόνα ως φόντο
Από τον συγγραφέα:Σε αυτό το σεμινάριο, θα εξετάσουμε μια απλή τεχνική για τη δημιουργία μιας εικόνας φόντου που θα εκτείνεται σε όλο το πλάτος της θύρας προβολής του προγράμματος περιήγησης. Για να γίνει αυτό, χρειαζόμαστε την ιδιότητα CSS μεγέθους φόντου. Δεν απαιτείται JavaScript.
Παραδείγματα αποκρινόμενων εικόνων φόντου ακέραιου αριθμού
Σήμερα, έχει γίνει αρκετά δημοφιλής η χρήση μιας τεράστιας φωτογραφίας ως φόντο, η οποία καταλαμβάνει ολόκληρη την ιστοσελίδα. Ακολουθούν παραδείγματα πολλών τοποθεσιών που έχουν αποκριτικές ολόκληρες εικόνες φόντου:
Εάν θέλετε να επιτύχετε ένα παρόμοιο αποτέλεσμα στο επόμενο web project σας, τότε αυτό το άρθρο είναι αυτό που χρειάζεστε.
Βασικές αρχές
Εδώ είναι το σχέδιο δράσης μας.
Χρησιμοποιήστε την ιδιότητα μεγέθους φόντου για να γεμίσετε πλήρως τη θύρα προβολής
Το μέγεθος φόντου της ιδιότητας CSS έχει οριστεί να καλύπτει. Η τιμή εξωφύλλου λέει στο πρόγραμμα περιήγησης να κλιμακώνει αυτόματα και αναλογικά το πλάτος και το ύψος της εικόνας φόντου, έτσι ώστε να είναι πάντα ίσο ή μεγαλύτερο από το πλάτος/ύψος της θύρας προβολής.
Χρησιμοποιήστε ένα ερώτημα πολυμέσων για να χειριστείτε μικρές εικόνες φόντου για κινητές συσκευές
Για να βελτιώσουμε την ταχύτητα φόρτωσης σελίδων σε μικρές οθόνες, θα χρησιμοποιήσουμε ένα ερώτημα πολυμέσων για να επεξεργαστούμε μια μικρότερη έκδοση της εικόνας φόντου μας. Δεν είναι υποχρεωτικό. Αυτή η τεχνική θα λειτουργήσει χωρίς αυτήν. Αλλά γιατί είναι καλή ιδέα η χρήση μιας μικρής εικόνας φόντου για κινητές συσκευές;
Η εικόνα που χρησιμοποίησα στο demo έχει ανάλυση 5500x3600px. Αυτή η ανάλυση είναι επαρκής για τις περισσότερες οθόνες υπολογιστών ευρείας οθόνης που είναι διαθέσιμες αυτήν τη στιγμή στην αγορά. Αλλά για αυτό θα πρέπει να επεξεργαστείτε ένα αρχείο μεγέθους 1,7 MB.
Αυτός ο τεράστιος επιπλέον φόρτος εργασίας μόνο και μόνο για τη δημοσίευση μιας φωτογραφίας φόντου δεν θα κάνει καλό ούτως ή άλλως. Και, φυσικά, αυτό θα έχει εξαιρετικά άσχημο αντίκτυπο στις συνδέσεις που χρησιμοποιούν το κινητό Διαδίκτυο. Αυτή η ανάλυση είναι επίσης υπερβολική για συσκευές με μικρές οθόνες (θα το δούμε λεπτομερέστερα αργότερα). Ας δούμε όλη τη διαδικασία.
HTML
Για σήμανση χρειάζεστε μόνο αυτό:
Θα αντιστοιχίσουμε μια εικόνα φόντου στο στοιχείο του σώματος, έτσι ώστε η εικόνα να γεμίζει πάντα ολόκληρη τη θύρα προβολής του προγράμματος περιήγησης.
Ωστόσο, αυτή η τεχνική θα λειτουργήσει επίσης για οποιοδήποτε στοιχείο μπλοκ (όπως ένα div ή μια φόρμα). Εάν το πλάτος και το ύψος του στοιχείου μπλοκ σας είναι ρευστά, τότε η εικόνα φόντου θα κλιμακώνεται πάντα ώστε να γεμίζει ολόκληρο το κοντέινερ.
CSS
Ορίστε τα ακόλουθα στυλ για το στοιχείο του σώματος:
body ( /* Διαδρομή προς την εικόνα */ φόντο-εικόνα: url(images/background-photo.jpg); /* Η εικόνα φόντου είναι πάντα κεντραρισμένη κατακόρυφα και οριζόντια */ θέση φόντου: κέντρο στο κέντρο; /* Η εικόνα φόντου δεν επαναλαμβάνεται * / background-repeat: no-repeat /* Η εικόνα φόντου είναι σταθερή στη θύρα προβολής, επομένως δεν μετακινείται όταν το ύψος του περιεχομένου είναι μεγαλύτερο από το ύψος της εικόνας */ συνημμένο φόντου: /*; Αυτό επιτρέπει στην εικόνα φόντου να προσαρμόζεται στο μέγεθος του κοντέινερ */ background-size: cover /* Ορίζει το χρώμα φόντου που θα εμφανίζεται κατά τη φόρτωση της εικόνας φόντου */ background-color: #464646 )
σώμα ( /* Διαδρομή προς την εικόνα */ φόντο - εικόνα : url (εικόνες / φόντο - φωτογραφία . jpg ) ; /* Η εικόνα φόντου είναι πάντα κεντραρισμένη κατακόρυφα και οριζόντια */ /* Η εικόνα φόντου δεν επαναλαμβάνεται */ φόντο - επανάληψη : όχι - επανάληψη ; /* Η εικόνα φόντου είναι σταθερή στη θύρα προβολής, ώστε να μην μετακινείται όταν το ύψος του περιεχομένου είναι μεγαλύτερο από το ύψος της εικόνας */ /* Αυτό επιτρέπει στην εικόνα φόντου να προσαρμόζεται στο μέγεθος του κοντέινερ */ φόντο-μέγεθος: εξώφυλλο; /* Ορίζει το χρώμα φόντου που θα εμφανίζεται κατά τη φόρτωση της εικόνας φόντου */ φόντο - χρώμα : #464646; |
Το πιο σημαντικό ζεύγος ιδιοκτησίας/αξίας που πρέπει να προσέξετε είναι:
Μέγεθος φόντου: εξώφυλλο;
φόντο-μέγεθος: εξώφυλλο; |
Εδώ αρχίζει η μαγεία. Αυτό το ζεύγος ιδιοτήτων/τιμής λέει στο πρόγραμμα περιήγησης να κλιμακώσει την εικόνα φόντου αναλογικά, π.χ. ώστε το πλάτος και το ύψος του να είναι ίσα ή μεγαλύτερα από το πλάτος/ύψος του στοιχείου (στην περίπτωσή μας, το στοιχείο του σώματος).
Ωστόσο, υπάρχει ένα πρόβλημα με αυτό το ζεύγος ιδιοτήτων/τιμών: εάν η εικόνα φόντου είναι μικρότερη από το στοιχείο του σώματος - κάτι που θα συμβεί σε οθόνες υψηλής ανάλυσης ή/και όταν έχετε τεράστιο όγκο περιεχομένου στη σελίδα - το πρόγραμμα περιήγησης θα αναπόφευκτα αυξήστε την κλίμακα της εικόνας. Και όπως γνωρίζουμε, όταν αυξάνουμε το μέγεθος μιας εικόνας bitmap, η ποιότητα της εικόνας μειώνεται (με άλλα λόγια, εμφανίζεται pixilation).
Η αύξηση του μεγέθους της εικόνας από το αρχικό της μέγεθος επηρεάζει την ποιότητα της εικόνας. Λάβετε αυτό υπόψη όταν επιλέγετε τη σωστή εικόνα. Η επίδειξη χρησιμοποιεί μια τεράστια φωτογραφία 5500x3600 px για οθόνες ευρείας οθόνης, επομένως θα απαιτούσε μια πολύ μεγάλη οθόνη για να υποβαθμιστεί η ποιότητα. Ας προχωρήσουμε. Για να διασφαλίσουμε ότι η εικόνα φόντου είναι πάντα κεντραρισμένη στο παράθυρο προβολής, θα γράψουμε:
φόντο-θέση: κέντρο κέντρο;
φόντο - θέση: κέντρο κέντρο; |
Αυτή η καταχώρηση τοποθετεί το φόντο στον άξονα συντεταγμένων στο κέντρο της θύρας προβολής. Στη συνέχεια, πρέπει να ορίσουμε τι συμβαίνει όταν το ύψος του περιεχομένου υπερβαίνει το ορατό ύψος της θύρας προβολής. Όταν συμβεί αυτό, εμφανίζεται μια γραμμή κύλισης.
Σε αυτήν την περίπτωση, πρέπει να διασφαλίσουμε ότι η εικόνα φόντου παραμένει στην αρχική της θέση ακόμα και όταν ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα. Σε αυτήν την περίπτωση, η εικόνα είτε απλά θα τελειώσει κατά την κύλιση είτε θα μετακινηθεί καθώς προχωρά η κύλιση (κάτι που μπορεί να αποσπάσει πολύ την προσοχή του χρήστη). Για να διορθώσετε το φόντο, ορίσαμε την ιδιότητα συνημμένου φόντου σε fixed.
φόντο-συνημμένο: σταθερό;
φόντο - συνημμένο: σταθερό; |
Στην επίδειξη, πρόσθεσα μια επιλογή "φόρτωση περιεχομένου", ώστε να μπορείτε να δείτε τι συμβαίνει όταν εμφανίζεται μια γραμμή κύλισης στο πρόγραμμα περιήγησης όταν η ιδιότητα του συνημμένου φόντου έχει οριστεί ως διορθωμένη. Μπορείτε επίσης να κάνετε λήψη της επίδειξης και να παίξετε με τις τιμές ιδιοτήτων τοποθέτησης (όπως το συνημμένο φόντο και τη θέση φόντου) για να δείτε πώς επηρεάζει την κύλιση σελίδας και την εικόνα φόντου. Οι υπόλοιπες αξίες των ακινήτων είναι αρκετά αυτονόητες.
Συντομογραφία CSS
Έχω περιγράψει λεπτομερώς τις ιδιότητες του φόντου για να τις εξηγήσω ευκολότερα. Η συντομευμένη μορφή θα είναι επίσης ισοδύναμη:
σώμα ( φόντο: url(background-photo.jpg) κεντρικό κεντρικό κάλυμμα χωρίς επανάληψη διορθώθηκε; )
σώμα ( φόντο : url (φόντο - φωτογραφία . jpg ) κεντρικό κάλυμμα χωρίς επανάληψη διορθώθηκε ; |
Το μόνο που χρειάζεται να κάνετε είναι να αλλάξετε την τιμή του url ώστε να δείχνει την εικόνα φόντου σας.
Προαιρετικό: Ερώτημα πολυμέσων για μικρές οθόνες
Για μικρότερες οθόνες, χρησιμοποίησα το Photoshop για να μειώσω αναλογικά την αρχική εικόνα φόντου σε 768x505 px και χρησιμοποίησα επίσης το Smush.it για να μειώσω λίγο περισσότερο το μέγεθος. Χάρη σε αυτό, το μέγεθος του αρχείου μειώθηκε από 1741KB σε 114KB. Εκείνοι. Το μέγεθος της εικόνας μειώθηκε κατά 93%.
Παρακαλώ μην με παρεξηγήσετε, τα 114 KB είναι ακόμα πολλά για ένα καθαρά αισθητικό στοιχείο σχεδίασης. Λαμβάνοντας υπόψη τον πρόσθετο φορτίο των 114 KB, θα χρησιμοποιούσα ένα τέτοιο αρχείο μόνο εάν έβλεπα την ευκαιρία να βελτιώσω σημαντικά την εμπειρία χρήστη (UX) του ιστότοπου, επειδή... Αυτή τη στιγμή, σημαντικό μερίδιο της κίνησης στο Διαδίκτυο προέρχεται από τη λειτουργία φορητών συσκευών φόντο - εικόνα: url (εικόνες / φόντο - φωτογραφία - κινητά - συσκευές. jpg);
Το ερώτημα πολυμέσων έχει όριο πλάτους μέγιστου πλάτους: 767 εικονοστοιχεία, που σημαίνει ότι εάν η θύρα προβολής του προγράμματος περιήγησης είναι μεγαλύτερη από 767 εικονοστοιχεία, θα φορτωθεί μια μεγάλη εικόνα φόντου.
Το μειονέκτημα στη χρήση αυτού του ερωτήματος πολυμέσων είναι ότι αν αλλάξετε το πλάτος του παραθύρου του προγράμματος περιήγησής σας από, για παράδειγμα, 1200 εικονοστοιχεία σε 640 εικονοστοιχεία (ή αντίστροφα), θα δείτε αμέσως τη στιγμή που φορτώνεται μια μικρή ή μεγάλη εικόνα φόντου.
Επιπλέον, επειδή ορισμένες συσκευές με μικρή οθόνη μπορούν να εμφανίσουν περισσότερα pixel - για παράδειγμα, το iPhone 5 με οθόνη αμφιβληστροειδούς μπορεί να εμφανίζει ανάλυση 1136x640 px - η μικρή εικόνα φόντου θα γίνει pixel.
Συνοψίζοντας
Μπορείτε να δείτε μια πιο πρόσφατη έκδοση του πηγαίου κώδικα σε αυτό το σεμινάριο στο GitHub. Μπορώ μόνο να σας προειδοποιήσω για ένα πράγμα: χρησιμοποιήστε αυτήν την τεχνική με προσοχή γιατί τα μεγάλα αρχεία μπορούν να βλάψουν σοβαρά το UX, ειδικά εάν ο τελικός χρήστης χρησιμοποιεί αργή και αναξιόπιστη σύνδεση στο Διαδίκτυο. Αυτός είναι ένας άλλος λόγος για τον οποίο θα πρέπει να επιλέξετε ένα κατάλληλο χρώμα φόντου, ώστε ο χρήστης να μπορεί να διαβάσει το περιεχόμενο ενώ φορτώνεται η εικόνα φόντου.
Σήμερα θα εργαστούμε σε εικόνες φόντου, οι οποίες ορίζονται χρησιμοποιώντας την ιδιότητα φόντου και τις πρόσθετες τιμές της. Ας δούμε μερικά πρακτικά παραδείγματα εγκατάστασης πολλαπλών φόντων για το ίδιο στοιχείο.
Αυτό μπορεί να είναι χρήσιμο σε πολλές περιπτώσεις και στιγμές. Ειδικά η χρήση ψευδοστοιχείων σε αυτή την περίπτωση, αφού είναι πολύ ευέλικτα σε παραμέτρους.
Πολλές εικόνες φόντου
Για να μην δημιουργήσετε ένα μπλοκ μέσα σε ένα μπλοκ, ο ευκολότερος τρόπος είναι να προσθέσετε μια γραμμή κανόνων στο κύριο στοιχείο και έτσι να έχετε το επιθυμητό αποτέλεσμα. Μπορούμε να το θεωρήσουμε μια λακωνική επιλογή, ειδικά επειδή εξαλείφει την ανάγκη να μπούμε ξανά στον πηγαίο κώδικα. Όλα θα γίνουν χρησιμοποιώντας μόνο CSS.
Blockimg( φόντο: url("img/img2.png"),/*ανώτατο φόντο και μετά διαδοχικά*/ url("img/img3.png"), url("img/img1.jpg"); θέση φόντου : 370px κέντρο, 120px 150px, κέντρο κέντρο;/*θέση εικόνων*/ background-repeat: no-repeat;/*repeat picture*/ background-color: #444;/*εάν απαιτείται χρώμα φόντου*/ box-shadow: 0 1px rgba(0, 0, 0, 0,1) περιθώριο 15px; 370px κέντρο, url("img/img3.png") no-repeat 120px 150px, url("img/img1.jpg") no-repeat center margin: 100px auto 15px; :700px;
Εξήγηση.Δίνουμε στο στοιχείο μια εικόνα φόντου, υποδεικνύοντας τη διαδρομή προς τη θέση του. Χωρισμένα με κόμματα, μας δίνεται η ευκαιρία να εισάγουμε πολλά περισσότερα φόντα, όπως φαίνεται στον παραπάνω κώδικα. Η σειρά των αριθμών τους καθορίζει ποια εικόνα θα βρίσκεται πάνω από τις άλλες. Δηλαδή, το πρώτο φόντο είναι υψηλότερο από όλα τα άλλα και στη συνέχεια η ακολουθία ακολουθεί την αρχή ενός κανονικού επεξεργαστή γραφικών.
Στη συνέχεια, καθορίζονται πρόσθετες παράμετροι μέσω επιμέρους ιδιοτήτων: θέση, επανάληψη, μέγεθος και, εάν είναι απαραίτητο, χρώμα. Σημειώστε επίσης ότι όλες οι παράμετροι γράφονται χωρισμένες με κόμμα, με την ίδια σειρά με τον αριθμό της εικόνας.
Και μια τελευταία λεπτομέρεια. Ολόκληρος ο κώδικας μπορεί να συντομευτεί χρησιμοποιώντας μόνο μία γενική ιδιότητα, το φόντο . Στο παράδειγμα κώδικα υπάρχει μια δεύτερη επιλογή που δείχνει πώς γίνεται αυτό.
Εικόνα φόντου μέσω ψευδοστοιχείου
Επίσης, μην ξεχνάτε εναλλακτικές επιλογές, όπως τα ψευδοστοιχεία πριν και μετά. Υπάρχει ένα θετικό πλεονέκτημα στη χρήση τους - η εικόνα μπορεί να μετακινηθεί πέρα από την άκρη του στοιχείου, έτσι ώστε να μην εξαφανίζεται στο όριο, αλλά να βρίσκεται στην κορυφή του. Αυτή η τεχνική θα σας φανεί χρήσιμη αν χρειαστεί να δημιουργήσετε κάτι σαν 3D εφέ.
Blockimg( background: url("img/img1.jpg") χωρίς επανάληψη;/*στοιχείο φόντο*/ position:relative;/* locationing area*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25 εικονοστοιχεία; πλάτος: 700 εικονοστοιχεία; ελάχ. ύψος: 300 εικονοστοιχεία; αριστερά: 0 θέση: απόλυτη;/*απόλυτη τοποθέτηση*/ δεξιά: -150 px )
Εξήγηση.Στην πραγματικότητα, όλα είναι πολύ απλά. Ρυθμίζουμε το φόντο στο κύριο στοιχείο με τον συνηθισμένο τρόπο. Ακολουθεί η βασική θέση ιδιοκτησίας: σχετική? , που ορίζει την περιοχή για τη μετακίνηση ενός άλλου στοιχείου που βρίσκεται στο κύριο στοιχείο και έχει την ιδιότητα position:absolute; .
Αντί για άλλο στοιχείο, αν και τυπικά πηγαίνει ως ξεχωριστή περιοχή, χρησιμοποιούμε ένα ψευδο-στοιχείο. Του δίνουμε απόλυτη θέση και το τοποθετούμε στη θέση που χρειαζόμαστε.
Νομίζω ότι δεν υπάρχει ούτε ένας ιστότοπος που να μην χρησιμοποιείται το ακίνητο CSS φόντο. Φαίνεται ότι τι θα μπορούσε να είναι πιο απλό από αυτό το ακίνητο; Αλλά όχι, οι δυνατότητές του είναι πολύ ευρύτερες από τη συνηθισμένη αντιστοίχιση μιας εικόνας ή ενός χρώματος ως φόντο σελίδας. Κάποια πράγματα θα είναι γνωστά, ενώ άλλα θα είναι πιθανώς καινούργια για πολλούς. Σε κάθε περίπτωση, θα είναι χρήσιμο να γνωρίζουμε διεξοδικά πώς λειτουργεί το φόντο.
Το CSS3 έφερε πολλά νέα πράγματα στην ιδιοκτησία, όπως η διαφάνεια και η αντιστοίχιση πολλών εικόνων ως φόντο, αλλά θα μιλήσουμε για αυτό παρακάτω, αλλά πρώτα θα δούμε τα βασικά της ιδιοκτησίας Ιστορικό.
χρώμα του φόντου
Είμαι περισσότερο από σίγουρος ότι έχετε ήδη αντιστοιχίσει το χρώμα φόντου περισσότερες από μία φορές. Αυτό μπορεί να γίνει χρησιμοποιώντας διάφορους τύπους σημειογραφίας: κανονική (χρησιμοποιείται το όνομα χρώματος), δεκαεξαδική ή RGB σημειογραφία. Κάθε τύπος είναι ισοδύναμος, χρησιμοποιήστε όποιο σας αρέσει περισσότερο. Προσπαθώ να χρησιμοποιήσω τη συντομότερη επιλογή και για ευκολότερη αντίληψη, το αρχείο στυλ που προκύπτει είναι λίγο μικρότερο σε μέγεθος.
P (χρώμα φόντου: κόκκινο;) p (χρώμα φόντου: #f00;) p (χρώμα φόντου: #ff0000;) p (χρώμα φόντου: rgb(255, 0, 0;))
Το CSS3 υποστηρίζει τη διαφάνεια, οπότε μπορούμε να το προσθέσουμε στο χρώμα μας, για παράδειγμα ως εξής:
P (χρώμα φόντου: rgba(255, 0, 0, 0,5);)
Το τελευταίο ποσοστό έθεσε τη διαφάνεια στο 50%. Μπορείτε να ορίσετε την τιμή διαφάνειας από 0 (εντελώς διαφανές φόντο) σε 1 (εντελώς αδιαφανές).
εικόνα φόντου
Αυτή η ιδιότητα χρησιμοποιείται επίσης πολύ συχνά και σας επιτρέπει να αντιστοιχίσετε μια εικόνα στο φόντο. Το CSS3 έχει προσθέσει τη δυνατότητα αντιστοίχισης πολλαπλών εικόνων στο παρασκήνιο, καθεμία δημιουργώντας το δικό της επίπεδο, έτσι ώστε κάθε επόμενη να επικαλύπτει την προηγούμενη. Γιατί μπορεί αυτό να είναι χρήσιμο; Όλα είναι πολύ απλά - ας υποθέσουμε ότι πρέπει να βιδώσετε μικρά διακοσμητικά στοιχεία σε κάθε γωνία του ιστότοπου. Δεδομένης μιας περισσότερο ή λιγότερο ελαστικής διάταξης, η χρήση μιας εικόνας δεν αποτελεί επιλογή. Επομένως, κάνουμε 4 "στρώματα", μετακινούμε κάθε εικόνα στη δική της γωνία και αυτό είναι όλο, το πρόβλημα λύνεται
Κύριο μέρος (εικόνα φόντου: url("image1"), url("image2"), url("image3"))
Εάν πρέπει να αντιστοιχίσετε μία εικόνα στο φόντο, αφήνουμε μόνο την πρώτη στον κώδικα, νομίζω ότι αυτό είναι κατανοητό.
Όταν χρησιμοποιείτε οποιεσδήποτε εικόνες ως φόντο, θα πρέπει να θυμάστε δύο κανόνες:
- ορίστε ένα χρώμα φόντου με αντίθεση σε περίπτωση που ο χρήστης δεν δει την εικόνα για κάποιο λόγο. Μπορεί απλά να απενεργοποιήσει την εμφάνιση εικόνων, εξοικονομώντας κίνηση.
- Μην χρησιμοποιείτε εικόνα φόντου για να μεταφέρετε σημαντικές πληροφορίες. Για τους λόγους που αναφέρθηκαν παραπάνω, ο χρήστης ενδέχεται να μην το δει.
Η υποστήριξη για πολλαπλές εικόνες φόντου είναι αρκετά εκτεταμένη. Όλα τα προγράμματα περιήγησης, ακόμη και το IE8, υποστηρίζουν αυτήν την ιδιότητα.
Από τον συγγραφέα:Γεια σε όλους. Τα χρώματα φόντου και οι εικόνες παίζουν τεράστιο ρόλο στη σχεδίαση ιστοσελίδων, καθώς σας επιτρέπουν να σχεδιάζετε πιο ελκυστικά οποιαδήποτε στοιχεία. Σήμερα θα δούμε πώς να δημιουργήσουμε ένα φόντο σε HTML.
Είναι δυνατόν να χρησιμοποιήσετε HTML για να ορίσετε το φόντο;
Θα πω αμέσως ότι όχι. Γενικά, η html δεν δημιουργήθηκε για να σχεδιάζει ιστοσελίδες. Απλώς είναι πολύ άβολο. Για παράδειγμα, υπάρχει ένα χαρακτηριστικό bgcolor, με το οποίο μπορείτε να ορίσετε το χρώμα φόντου, αλλά αυτό είναι πολύ ενοχλητικό.
Αντίστοιχα, θα χρησιμοποιήσουμε Cascading Style Sheets (CSS). Υπάρχουν πολύ περισσότερες ευκαιρίες για τη δημιουργία φόντου. Σήμερα θα δούμε τα πιο βασικά.
Πώς να ρυθμίσετε το φόντο χρησιμοποιώντας css;
Επομένως, πρώτα απ 'όλα, πρέπει να αποφασίσετε σε ποιο στοιχείο θέλετε να ορίσετε το φόντο. Δηλαδή, πρέπει να βρούμε έναν επιλογέα στον οποίο θα γράψουμε έναν κανόνα. Για παράδειγμα, εάν πρέπει να ορίσετε το φόντο για ολόκληρη τη σελίδα ως σύνολο, μπορείτε να το κάνετε μέσω του επιλογέα σώματος και για όλα τα μπλοκ μέσω του επιλογέα div. Λοιπόν, κλπ. Το φόντο μπορεί και πρέπει να συνδεθεί με οποιονδήποτε άλλο επιλογέα: κλάσεις στυλ, αναγνωριστικά κ.λπ.
Αφού αποφασίσετε για τον επιλογέα, πρέπει να γράψετε το ίδιο το όνομα του ακινήτου. Για να ορίσετε το χρώμα φόντου (δηλαδή ένα συμπαγές χρώμα, όχι μια κλίση ή μια εικόνα), χρησιμοποιήστε την ιδιότητα χρώματος φόντου. Μετά από αυτό πρέπει να βάλετε μια άνω τελεία και να γράψετε το ίδιο το χρώμα. Αυτό μπορεί να γίνει με διάφορους τρόπους. Για παράδειγμα, χρησιμοποιώντας λέξεις-κλειδιά, δεκαεξαδικό κώδικα, μορφές rgb, rgba, hsl. Οποιαδήποτε μέθοδος θα κάνει.
Η πιο συχνά χρησιμοποιούμενη μέθοδος είναι ο δεκαεξαδικός κώδικας. Για να επιλέξετε χρώματα, μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα που εμφανίζει τον κωδικό χρώματος. Για παράδειγμα, photoshop, paint ή κάποιο διαδικτυακό εργαλείο. Αντίστοιχα, ως παράδειγμα, θα γράψω ένα γενικό υπόβαθρο για ολόκληρη την ιστοσελίδα.
σώμα (χρώμα φόντου: #D4E6B3; )
Αυτός ο κωδικός πρέπει να εισαχθεί στο τμήμα κεφαλής. Είναι σημαντικό τα αρχεία να βρίσκονται στον ίδιο φάκελο.
Εικόνα ως φόντο
Για την εικόνα θα χρησιμοποιήσω ένα μικρό εικονίδιο γλώσσας html:
Ας δημιουργήσουμε ένα κενό μπλοκ με ένα αναγνωριστικό:
< div id = "bg" > < / div > |
Ας του δώσουμε σαφείς διαστάσεις και φόντο:
#bg(πλάτος: 400 εικονοστοιχεία; ύψος: 250 εικονοστοιχεία; εικόνα φόντου: url(html.png); )
#bg( πλάτος: 400 px; ύψος: 250 px; φόντο - εικόνα : url (html . png ) ; |
Από αυτόν τον κωδικό μπορείτε να δείτε ότι χρησιμοποίησα μια νέα ιδιότητα - background-image. Προορίζεται ειδικά για την εισαγωγή μιας εικόνας ως φόντου σε ένα στοιχείο html. Ας δούμε τι έγινε:
Για να καθορίσετε μια εικόνα, πρέπει να γράψετε τη λέξη-κλειδί url μετά την άνω και κάτω τελεία και, στη συνέχεια, να υποδείξετε τη διαδρομή προς το αρχείο σε παρένθεση. Σε αυτήν την περίπτωση, η διαδρομή καθορίζεται με βάση το γεγονός ότι η εικόνα βρίσκεται στον ίδιο φάκελο με το έγγραφο html. Πρέπει επίσης να καθορίσετε τη μορφή εικόνας.
Εάν το έχετε κάνει και το φόντο δεν εμφανίζεται ακόμα στο μπλοκ, ελέγξτε ξανά εάν γράψατε σωστά το όνομα της εικόνας, εάν η διαδρομή και η επέκταση έχουν οριστεί σωστά. Αυτοί είναι οι πιο συνηθισμένοι λόγοι για τους οποίους το φόντο απλώς δεν εμφανίζεται επειδή το πρόγραμμα περιήγησης δεν μπορεί να βρει την εικόνα.
Παρατήρησες όμως ένα πράγμα; Το πρόγραμμα περιήγησης πήρε και πολλαπλασίασε την εικόνα σε όλο το μπλοκ. Έτσι, για να ξέρετε, αυτή είναι η προεπιλεγμένη συμπεριφορά των εικόνων φόντου - επαναλαμβάνονται κάθετα και οριζόντια, εφόσον μπορούν να χωρέσουν στο μπλοκ. Με αυτή τη συμπεριφορά μπορείτε εύκολα να ελέγξετε. Για να το κάνετε αυτό, χρησιμοποιήστε την ιδιότητα background-repeat, η οποία έχει 4 κύριες τιμές:
Repeat – προεπιλεγμένη τιμή, η εικόνα επαναλαμβάνεται και στις δύο πλευρές.
Repeat-x – επαναλαμβάνεται μόνο στον άξονα x.
Repeat-y – επαναλαμβάνεται μόνο κατά μήκος του άξονα y.
Χωρίς επανάληψη – δεν επαναλαμβάνεται καθόλου.
Μπορείτε να γράψετε κάθε τιμή και να δείτε τι συμβαίνει. Θα το γράψω ως εξής:
background-repeat: repeat-x;
φόντο - επανάληψη : επανάληψη - x ; |
Τώρα επαναλάβετε μόνο οριζόντια. Εάν ρυθμίσετε τη μη επανάληψη, τότε θα υπάρχει μόνο μία εικόνα.
Τέλεια, μπορούμε να τελειώσουμε εδώ, καθώς αυτές είναι οι βασικές δυνατότητες εργασίας με το φόντο, αλλά θα σας δείξω 2 ακόμη ιδιότητες που σας επιτρέπουν να αποκτήσετε περισσότερο έλεγχο.
Μέσω της επανάληψης, οι σχεδιαστές διάταξης συνήθιζαν να δημιουργούν υφές φόντου και διαβαθμίσεις χρησιμοποιώντας μια μικροσκοπική εικόνα. Θα μπορούσε να είναι 30 επί 10 pixel ή ακόμα και μικρότερο. Ή ίσως λίγο περισσότερο. Η εικόνα ήταν τέτοια που όταν επαναλαμβανόταν στη μία ή και στις δύο πλευρές, δεν φαινόταν καμία μετάβαση, οπότε το αποτέλεσμα ήταν ένα ενιαίο, χωρίς ραφή φόντο. Παρεμπιπτόντως, αυτή η προσέγγιση αξίζει να χρησιμοποιήσετε τώρα εάν θέλετε να χρησιμοποιήσετε μια απρόσκοπτη υφή στον ιστότοπό σας ως φόντο. Σήμερα το gradient μπορεί ήδη να εφαρμοστεί χρησιμοποιώντας μεθόδους css3, σίγουρα θα μιλήσουμε γι 'αυτό αργότερα.
Θέση φόντου
Από προεπιλογή, η εικόνα φόντου, εκτός εάν έχει ρυθμιστεί να επαναλαμβάνεται, θα βρίσκεται στην επάνω αριστερή γωνία του μπλοκ της. Αλλά η θέση μπορεί εύκολα να αλλάξει χρησιμοποιώντας την ιδιότητα background-position.
Μπορείτε να το ρυθμίσετε με διαφορετικούς τρόπους. Μια επιλογή είναι να υποδείξετε απλώς τις πλευρές στις οποίες πρέπει να βρίσκεται η εικόνα:
φόντο-θέση: πάνω δεξιά.
φόντο-θέση: πάνω δεξιά; |
Δηλαδή, κάθετα όλα παραμένουν ίδια: η εικόνα φόντου βρίσκεται στην κορυφή, αλλά οριζόντια αλλάξαμε την πλευρά προς τα δεξιά, δηλαδή δεξιά. Ένας άλλος τρόπος για να ορίσετε μια θέση είναι ως ποσοστό. Σε αυτή την περίπτωση, η αντίστροφη μέτρηση ξεκινά σε κάθε περίπτωση από την επάνω αριστερή γωνία. 100% - ολόκληρο το μπλοκ. Έτσι, για να τοποθετήσουμε την εικόνα ακριβώς στο κέντρο, τη γράφουμε ως εξής:
φόντο-θέση: 50% 50%;
φόντο-θέση: 50% 50%; |
Θυμηθείτε ένα σημαντικό πράγμα σχετικά με την τοποθέτηση - η πρώτη παράμετρος είναι πάντα η οριζόντια θέση και η δεύτερη είναι η κατακόρυφη θέση. Έτσι, εάν δείτε μια τιμή 80% 20%, τότε μπορείτε αμέσως να συμπεράνετε ότι η εικόνα φόντου θα μετατοπιστεί πολύ προς τα δεξιά, αλλά δεν θα μειωθεί πολύ.
Και τέλος, μπορείτε να καθορίσετε τη θέση σε pixel. Όλα είναι ίδια, μόνο αντί για % θα υπάρχει px. Σε ορισμένες περιπτώσεις, μια τέτοια τοποθέτηση μπορεί να είναι απαραίτητη.
Συντομογραφία
Συμφωνήστε ότι ο κώδικας αποδεικνύεται αρκετά δυσκίνητος εάν όλα έχουν ρυθμιστεί όπως τα κάναμε. Αποδεικνύεται ότι πρέπει να καθοριστεί η διαδρομή προς την εικόνα, η επανάληψη και η θέση. Φυσικά, η επανάληψη και η θέση δεν είναι πάντα απαραίτητες, αλλά σε κάθε περίπτωση, θα ήταν πιο σωστό να χρησιμοποιήσετε μια συντομογραφία για το ακίνητο. Μοιάζει με αυτό:
φόντο: #333 url(bg.jpg) μη επανάληψη 50% 50%;
Ιστορικό: #333 url(bg.jpg) μη επανάληψη 50% 50%; |
Δηλαδή, το πρώτο βήμα είναι να καταγράψετε το συνολικό συμπαγές χρώμα φόντου, εάν είναι απαραίτητο. Στη συνέχεια η διαδρομή προς την εικόνα, η επανάληψη και η θέση. Εάν κάποια παράμετρος δεν χρειάζεται, τότε απλώς παραλείψτε την. Συμφωνώ, αυτό είναι πολύ πιο γρήγορο και πιο βολικό και μειώνουμε επίσης σημαντικά τον κωδικό μας. Γενικά, σας συμβουλεύω να γράφετε πάντα σε συντομογραφία, ακόμα κι αν χρειάζεται μόνο να υποδείξετε ένα χρώμα ή μια εικόνα.
Έλεγχος του μεγέθους της εικόνας φόντου
Η τρέχουσα εικόνα μας δεν είναι πολύ καλή για να δείξουμε το επόμενο κόλπο, οπότε θα πάρω άλλο ένα. Αφήστε το να έχει το μέγεθος ενός μπλοκ ή μεγαλύτερο. Φανταστείτε λοιπόν ότι αντιμετωπίζετε το καθήκον να δημιουργήσετε μια εικόνα φόντου έτσι ώστε να μην γεμίζει εντελώς το μπλοκ της. Και η εικόνα, για παράδειγμα, είναι ακόμη μεγαλύτερη από το μέγεθος του μπλοκ.
Τι μπορείτε να κάνετε σε αυτή την περίπτωση; Φυσικά, η απλούστερη και πιο λογική επιλογή θα ήταν απλώς να μειώσετε την εικόνα, αλλά δεν είναι πάντα δυνατό να το κάνετε αυτό. Ας πούμε ότι είναι στον διακομιστή και αυτή τη στιγμή δεν υπάρχει χρόνος ή ευκαιρία να το μειώσουμε. Το πρόβλημα μπορεί να λυθεί χρησιμοποιώντας την ιδιότητα background-size, η οποία μπορεί να ονομαστεί σχετικά νέα και η οποία σας επιτρέπει να χειριστείτε το μέγεθος της εικόνας φόντου, και μάλιστα οποιουδήποτε φόντου.
Έτσι, η εικόνα μου καταλαμβάνει τώρα όλο το χώρο στο μπλοκ, αλλά θα της δώσω ένα μέγεθος φόντου:
Μέγεθος φόντου: 80% 50%;
Μέγεθος φόντου: 80% 50%; |
Και πάλι, η πρώτη παράμετρος ορίζει το οριζόντιο μέγεθος, η δεύτερη - το κατακόρυφο μέγεθος. Βλέπουμε ότι όλα εφαρμόστηκαν σωστά - η φωτογραφία έγινε το 80% του πλάτους του μπλοκ σε πλάτος και το μισό σε ύψος. Εδώ πρέπει απλώς να κάνετε μια διευκρίνιση - ορίζοντας το μέγεθος ως ποσοστό, μπορείτε να επηρεάσετε τις αναλογίες της εικόνας. Προσοχή λοιπόν αν θέλετε να μην ανατρέψετε τις αναλογίες.
Όπως μπορείτε να μαντέψετε, το μέγεθος του φόντου μπορεί επίσης να καθοριστεί σε pixel. Υπάρχουν δύο ακόμη λέξεις-κλειδιά που μπορούν επίσης να χρησιμοποιηθούν:
Εξώφυλλο – η εικόνα θα κλιμακωθεί έτσι ώστε τουλάχιστον στη μία πλευρά να γεμίζει πλήρως το μπλοκ.
Contain – κλιμακώστε το έτσι ώστε η εικόνα να χωράει πλήρως στο μπλοκ στο μέγιστο μέγεθός του.
Το πλεονέκτημα αυτών των τιμών είναι ότι δεν αλλάζουν τις αναλογίες της εικόνας, αφήνοντάς τις ίδιες.
Θα πρέπει επίσης να καταλάβετε ότι το τέντωμα της εικόνας μπορεί να οδηγήσει σε υποβάθμιση της ποιότητάς της. Μπορώ να δώσω ένα παράδειγμα από τη ζωή και την πραγματική πρακτική των σχεδιαστών layout. Όλοι γνωρίζουν και καταλαβαίνουν ότι όταν σχεδιάζετε για επιτραπέζιους υπολογιστές, πρέπει να προσαρμόσετε τον ιστότοπο στα πλάτη της κύριας οθόνης: 1280, 1366, 1920. Εάν τραβήξετε μια εικόνα φόντου με μέγεθος, ας πούμε, 1280 επί 200 και δεν τη δώσετε ένα μέγεθος φόντου και μετά οθόνες με μεγαλύτερο πλάτος Θα εμφανιστεί ένας κενός χώρος, η εικόνα δεν θα γεμίσει πλήρως το πλάτος.
Στο 99% των περιπτώσεων, αυτό δεν ταιριάζει στον προγραμματιστή ιστού, επομένως ορίζει το μέγεθος φόντου: εξώφυλλο έτσι ώστε η εικόνα να εκτείνεται πάντα στο μέγιστο πλάτος του παραθύρου. Αυτή είναι μια καλή τεχνική για χρήση, αλλά τώρα θα αντιμετωπίσετε το πρόβλημα ότι οι χρήστες με πλάτος οθόνης 1920 pixel μπορεί να δουν μια υποβέλτιστη ποιότητα εικόνας.
Να σας υπενθυμίσω, θα τεντωθεί στο μέγιστο πλάτος του. Κατά συνέπεια, η ποιότητα θα επιδεινωθεί αυτόματα. Η μόνη σωστή λύση εδώ θα ήταν να χρησιμοποιήσετε αρχικά μια μεγαλύτερη εικόνα – πλάτους 1920 pixel. Στη συνέχεια, στις πιο φαρδιές οθόνες θα είναι στο φυσικό της μέγεθος και σε άλλες απλά θα αποκοπεί σταδιακά, αλλά ταυτόχρονα, εάν η εικόνα φόντου είναι σωστά επιλεγμένη, αυτό δεν θα επηρεάσει την εμφάνιση του ιστότοπου.
Σε γενικές γραμμές, αυτό είναι μόνο 1 παράδειγμα για το πώς να χρησιμοποιήσετε τις γνώσεις που αποκτήσατε σε αυτό το άρθρο κατά τη διαμόρφωση πραγματικών διατάξεων.
Ημιδιαφανές φόντο με χρήση css
Ένα άλλο χαρακτηριστικό που μπορεί να εφαρμοστεί χρησιμοποιώντας css είναι ένα ημιδιαφανές φόντο. Δηλαδή, μέσα από αυτό το υπόβαθρο θα είναι δυνατό να δούμε τι κρύβεται πίσω από αυτό.
Ως παράδειγμα, θα ορίσω ολόκληρη τη σελίδα ως φόντο στην εικόνα που χρησιμοποιήσαμε νωρίτερα στα παραδείγματα. Για το μπλοκ με αναγνωριστικό bg, στο οποίο διεξάγουμε όλα τα πειράματά μας, θα ορίσουμε το φόντο χρησιμοποιώντας τη μορφή ρύθμισης χρώματος rgba.
Όπως είπα νωρίτερα, υπάρχουν πολλές μορφές για τη ρύθμιση των χρωμάτων στο CSS. Ένα από αυτά είναι το rgb, μια αρκετά γνωστή μορφή για όσους εργάζονται σε γραφικούς επεξεργαστές. Είναι γραμμένο ως εξής: rgb(17, 255, 34);
Η πρώτη τιμή στις αγκύλες είναι ο κορεσμός του κόκκινου, μετά πράσινου και μετά μπλε. Η τιμή μπορεί να είναι αριθμητική από 0 έως 255. Κατά συνέπεια, η μορφή rgba δεν διαφέρει, προστίθεται μόνο μία ακόμη παράμετρος - το κανάλι άλφα. Η τιμή μπορεί να είναι από 0 έως 1, όπου το 0 είναι πλήρης διαφάνεια.
σύντομες πληροφορίες
Εκδόσεις CSS
Αξίες
url Η τιμή είναι η διαδρομή προς το αρχείο γραφικών, η οποία καθορίζεται μέσα στην κατασκευή url(). Η διαδρομή προς το αρχείο μπορεί να γραφτεί είτε σε εισαγωγικά (διπλά ή μονά) είτε χωρίς αυτά. none Απενεργοποιεί την εικόνα φόντου για το στοιχείο. inherit Κληρονομεί την αξία του γονέα.HTML5 CSS2.1 IE Cr Op Sa Fx
Μοντέλο αντικειμένου
document.getElementById("elementID").style.backgroundImage
Προγράμματα περιήγησης
Οι εκδόσεις του Internet Explorer έως και 7.0 περιλαμβάνουν φόντο στο εσωτερικό περίγραμμα ενός στοιχείου που έχει το σύνολο ιδιοτήτων hasLayout. Εάν το στοιχείο δεν έχει hasLayout , η ιδιότητα φόντου-εικόνα θα σέβεται τα όρια του στοιχείου, όπως καθορίζεται στην προδιαγραφή. Η διαφορά στην οθόνη θα είναι αισθητή εάν τα περιγράμματα είναι διακεκομμένα ή διακεκομμένα και όχι συμπαγή.
Εάν το στοιχείο έχει οριστεί σε κύλιση ή αυτόματη , ο Internet Explorer 8 θα έχει κατακόρυφη καθυστέρηση ενός εικονοστοιχείου κατά την κύλιση του φόντου.
Οι εκδόσεις του Internet Explorer έως και 7.0 δεν υποστηρίζουν την τιμή κληρονομιάς.
Εάν το φόντο έχει οριστεί για μια σειρά πίνακα (ετικέτα
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Το αποτέλεσμα αυτού του παραδείγματος στο πρόγραμμα περιήγησης Chrome φαίνεται στην Εικ. 1. Τα προγράμματα περιήγησης Internet Explorer, Opera και Firefox εμφανίζουν σωστά το φόντο της γραμμής (Εικ. 2).
Ρύζι. 1. Επαναλάβετε το φόντο για κάθε κελί
Ρύζι. 2. Φόντο για ολόκληρη τη γραμμή