Πώς να ορίσετε την εικόνα φόντου στο css. Εικόνα φόντου

Ο ορισμός χρώματος φόντου ή/και εικόνας για μια σελίδα ή το μεμονωμένο στοιχείο της είναι αρκετά απλή. Το κύριο πράγμα είναι να γνωρίζετε πού και πώς να το κάνετε αυτό, καθώς και να έχετε έναν κωδικό χρώματος ή/και μια εικόνα φόντου. Είναι πιθανό να μάθετε πολλά νέα πράγματα από αυτό το άρθρο, αλλά το δημιούργησα ειδικά για αρχάριους. Επομένως, όλα θα είναι όσο το δυνατόν πιο σύντομα και λεπτομερή ταυτόχρονα. Το κύριο πράγμα είναι ότι θα λάβετε όχι μόνο μια γενική ιδέα και έτοιμα παραδείγματα, αλλά και μια κατανόηση του τρόπου δημιουργίας φόντου σε HTML.

Για να ορίσετε το φόντο σε HTML χρησιμοποιήστε το ενδιάμεσο DOCTYPE

Και θα ξεκινήσω με το γεγονός ότι σε HTML5δεν είναι δυνατό να ρυθμίσετε . Αποφασίστηκε να προστεθεί αυτή η δυνατότητα στο CSS. Επομένως, εάν σκοπεύετε να χρησιμοποιήσετε τα ακόλουθα και θέλετε να λάβετε έγκυρο (σωστό) κωδικό, πρέπει να επιλέξετε τον τύπο μεταβατικού εγγράφου. Για να γίνει αυτό, η ιστοσελίδα σας πρέπει να ξεκινά με την ακόλουθη γραμμή:

Μεταβατικός//EN" "http://www.w3.org/TR/html4/loose.dtd">

Με αυτό να μην υπάρχει, ας προχωρήσουμε στην κατανόηση του τρόπου δημιουργίας του φόντου. Και το πρώτο πράγμα που πρέπει να σημειωθεί εδώ είναι η διαφορά μεταξύ χρώμα του φόντουΚαι εικόνα φόντου. Στην αρχή πάει χρώμα του φόντου, που καλύπτει ολόκληρο τον διαθέσιμο χώρο της σελίδας ή του στοιχείου της. Επικαλύπτεται από πάνω του είναι μια επανάληψη εικόνα φόντου. Οπτικά αυτό μπορεί να απεικονιστεί ως εξής:

Φόντο ενός εγγράφου HTML και τα στοιχεία του

Το δεύτερο πράγμα που πρέπει να ξέρετε είναι η διαφορά μεταξύ σώμα του εγγράφουΚαι στοιχείο εγγράφου. Σώμα εγγράφουυποδεικνύεται στον κώδικα HTML μιας ιστοσελίδας με την ετικέτα BODY, η οποία περιλαμβάνει ολόκληρο το περιεχόμενο της ιστοσελίδας. Προφανώς, το φόντο του σώματος του εγγράφου δεν μπορεί να είναι διαφανές. Εάν δεν έχει καθοριστεί το φόντο του σώματος του εγγράφου, χρησιμοποιείται η προεπιλεγμένη τιμή που καθορίζεται στις ρυθμίσεις του προγράμματος περιήγησης.

Στοιχεία σελίδαςβρίσκονται μέσα στην ετικέτα BODY. Αξίζει να σημειωθεί ότι δεν είναι δυνατό να ορίσετε το χρώμα ή/και την εικόνα φόντου χρησιμοποιώντας HTML για όλα τα στοιχεία του εγγράφου. Για παράδειγμα, μια εικόνα φόντου μπορεί να καθοριστεί μόνο για πίνακες. Από προεπιλογή, συνήθως έχουν διαφανές φόντο.

Το χαρακτηριστικό bgcolor για τη δημιουργία χρώματος φόντου

Να ρωτήσω χρώμα του φόντουτο έγγραφο ή τα στοιχεία του χρησιμοποιούν το χαρακτηριστικό bgcolor, για παράδειγμα:

Σε αυτήν την περίπτωση, ορίζουμε το χρώμα φόντου για τη σελίδα ως σύνολο. Και εδώ είναι ένα παράδειγμα για το πώς να ορίσετε το χρώμα φόντου για έναν πίνακα στην ετικέτα TABLE:

Κείμενο με φόντο

Αξίζει να σημειωθεί ότι το χρώμα φόντου στον πίνακα μπορεί να καθοριστεί και για τις δύο σειρές στην ετικέτα TR και για τα κελιά τους στην ετικέτα TD.

Πώς να μάθετε τον κωδικό χρώματος;

Πιθανότατα έχετε ήδη παρατηρήσει ότι το χρώμα στην HTML έχει οριστεί σε ειδικό κώδικας, για παράδειγμα: #ec008c . Για να μάθετε τον κωδικό του χρώματος που χρειάζεστε, μπορείτε να χρησιμοποιήσετε έναν από τους επεξεργαστές γραφικών. Για παράδειγμα, στο Photoshop μπορείτε να χρησιμοποιήσετε το " Εργαλείο σταγονόμετρου» (Πιπέτα) για να αποκτήσετε χρώμα από ένα σημείο της εικόνας. Στη συνέχεια, πρέπει να κάνετε κλικ στο χρώμα που προκύπτει στη γραμμή εργαλείων και στο παράθυρο που ανοίγει " Επιλογέας χρώματος» (Επιλογή χρώματος) αντιγράψτε τον κωδικό χρώματος.

Λάβετε υπόψη ότι αυτός ο κωδικός δεν θα έχει σύμβολο λίρας (#) στην αρχή αυτό το σύμβολο θα πρέπει να προστεθεί χειροκίνητα.

Μπορείτε επίσης να χρησιμοποιήσετε πολλές διαδικτυακές υπηρεσίες, για παράδειγμα:

• και τα λοιπά.

Η αρχή λειτουργίας τους είναι ακόμα πιο απλή - κάντε κλικ στο επιθυμητό χρώμα και λάβετε τον κωδικό του.

Το χαρακτηριστικό φόντου για τη δημιουργία μιας εικόνας φόντου

Όπως και στην περίπτωση του χρώματος φόντου, και στην περίπτωση του εικόνα φόντουΠρέπει να χρησιμοποιήσετε ένα ειδικό χαρακτηριστικό, δηλαδή το background , για παράδειγμα:

Σε αυτήν την περίπτωση, ορίζουμε μια εικόνα φόντου για τη σελίδα ως σύνολο. Αξίζει να σημειωθεί ότι λόγω του περιορισμού του μεγέθους της εικόνας, θα επαναληφθεί, για παράδειγμα:

Όπως μπορείτε να δείτε, όταν επαναλαμβάνεται, η μετάβαση μεταξύ των εικόνων είναι αισθητή. Ως εκ τούτου, χρησιμοποιούνται συχνά ειδικές εικόνες όπου αυτό το σημείο λαμβάνεται υπόψη.

Και εδώ είναι ένα παράδειγμα για το πώς να ορίσετε μια εικόνα φόντου για έναν πίνακα στην ετικέτα TABLE:

Κείμενο με φόντο

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

Απόλυτη και σχετική διαδρομή προς την εικόνα φόντου

Αξίζει να δοθεί ιδιαίτερη προσοχή διεύθυνση εικόνας φόντου. Σε αυτή την περίπτωση, χρησιμοποιείται μια σχετική διαδρομή προς την εικόνα, π.χ. Η διεύθυνση καθορίζεται σε σχέση με τη θέση του αρχείου εικόνας για το αρχείο της ιστοσελίδας. Αυτή η επιλογή δεν μπορεί να χαρακτηριστεί ιδιαίτερα επιτυχημένη. Είναι καλύτερο να χρησιμοποιήσετε μια απόλυτη διαδρομή προς την εικόνα, π.χ. την πλήρη διεύθυνση URL του, Για παράδειγμα:

Σε αυτή την περίπτωση, δεν θα έχετε κανένα σχετικό πρόβλημα. Μπορείτε να διαβάσετε περισσότερα για αυτό.

Ας το συνοψίσουμε

Η χρήση των χαρακτηριστικών bgcolor και background είναι ξεπερασμένη, επομένως για την εγκυρότητα του κώδικα HTML θα πρέπει να χρησιμοποιήσετε το μεταβατικό DOCTYPE . Για να ορίσετε το χρώμα φόντου σε HTML, χρησιμοποιεί ειδικούς κωδικούς, τους οποίους μπορείτε να βρείτε σε ένα πρόγραμμα επεξεργασίας γραφικών ή χρησιμοποιώντας ειδικές διαδικτυακές υπηρεσίες. Η εικόνα φόντου αντιγράφεται στην περιοχή που της έχει εκχωρηθεί και βρίσκεται πάνω από το χρώμα του φόντου. Για να καθορίσετε μια εικόνα φόντου, είναι προτιμότερο να χρησιμοποιήσετε την πλήρη διεύθυνση URL. Αυτό είναι το μόνο που έχω. Σας ευχαριστώ για την προσοχή σας. Καλή τύχη!

στις 22:37

Επεξεργασία μηνύματος

Από τον συγγραφέα:Γεια σε όλους. Τα χρώματα και οι εικόνες φόντου παίζουν τεράστιο ρόλο στη σχεδίαση ιστοσελίδων, καθώς σας επιτρέπουν να σχεδιάζετε πιο ελκυστικά οποιαδήποτε στοιχεία. Σήμερα θα δούμε πώς να δημιουργήσουμε ένα φόντο σε 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 ) ;

Από αυτόν τον κωδικό μπορείτε να δείτε ότι χρησιμοποίησα μια νέα ιδιότητα - φόντο-εικόνα. Προορίζεται ειδικά για την εισαγωγή μιας εικόνας ως φόντου σε ένα στοιχείο html. Ας δούμε τι έγινε:

Για να καθορίσετε μια εικόνα, πρέπει να γράψετε τη λέξη-κλειδί url μετά την άνω και κάτω τελεία και, στη συνέχεια, να υποδείξετε τη διαδρομή προς το αρχείο σε παρένθεση. Σε αυτήν την περίπτωση, η διαδρομή καθορίζεται με βάση το γεγονός ότι η εικόνα βρίσκεται στον ίδιο φάκελο με το έγγραφο html. Πρέπει επίσης να καθορίσετε τη μορφή εικόνας.

Εάν το έχετε κάνει και το φόντο δεν εμφανίζεται ακόμα στο μπλοκ, ελέγξτε ξανά εάν γράψατε σωστά το όνομα της εικόνας, εάν η διαδρομή και η επέκταση έχουν οριστεί σωστά. Αυτοί είναι οι πιο συνηθισμένοι λόγοι για τους οποίους το φόντο απλώς δεν εμφανίζεται επειδή το πρόγραμμα περιήγησης δεν μπορεί να βρει την εικόνα.

Παρατήρησες όμως ένα πράγμα; Το πρόγραμμα περιήγησης πήρε και πολλαπλασίασε την εικόνα σε όλο το μπλοκ. Έτσι, για να ξέρετε, αυτή είναι η προεπιλεγμένη συμπεριφορά των εικόνων φόντου - επαναλαμβάνονται κάθετα και οριζόντια, εφόσον μπορούν να χωρέσουν στο μπλοκ. Με αυτή τη συμπεριφορά μπορείτε εύκολα να ελέγξετε. Για να το κάνετε αυτό, χρησιμοποιήστε την ιδιότητα background-repeat, η οποία έχει 4 κύριες τιμές:

Repeat – προεπιλεγμένη τιμή, η εικόνα επαναλαμβάνεται και στις δύο πλευρές.

Repeat-x – επαναλαμβάνεται μόνο στον άξονα x.

Repeat-y – επαναλαμβάνεται μόνο κατά μήκος του άξονα y.

Χωρίς επανάληψη – δεν επαναλαμβάνεται καθόλου.

Μπορείτε να γράψετε κάθε τιμή και να δείτε τι συμβαίνει. Θα το γράψω ως εξής:

background-repeat: repeat-x;

φόντο - επανάληψη : επανάληψη - x ;

Τώρα επαναλάβετε μόνο οριζόντια. Εάν ρυθμίσετε τη μη επανάληψη, τότε θα υπάρχει μόνο μία εικόνα.

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

Μέσω της επανάληψης, οι σχεδιαστές διάταξης συνήθιζαν να δημιουργούν υφές φόντου και διαβαθμίσεις χρησιμοποιώντας μια μικροσκοπική εικόνα. Θα μπορούσε να είναι 30 επί 10 pixel ή ακόμα και μικρότερο. Ή ίσως λίγο περισσότερο. Η εικόνα ήταν τέτοια που όταν επαναλαμβανόταν στη μία ή και στις δύο πλευρές, δεν φαινόταν καμία μετάβαση, οπότε το αποτέλεσμα ήταν ένα ενιαίο, χωρίς ραφή φόντο. Παρεμπιπτόντως, αυτή η προσέγγιση αξίζει να χρησιμοποιήσετε τώρα εάν θέλετε να χρησιμοποιήσετε μια απρόσκοπτη υφή στον ιστότοπό σας ως φόντο. Σήμερα, μια διαβάθμιση μπορεί ήδη να εφαρμοστεί χρησιμοποιώντας μεθόδους 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 είναι πλήρης διαφάνεια.

Σχεδόν κάθε δημοφιλής ιστότοπος έχει ωραία εμφάνιση. Ένα σημαντικό μέρος του σχεδιασμού της ιστοσελίδας είναι το φόντο, που ονομάζεται επίσης φόντο, το οποίο ο καθένας από εμάς μπορεί να δημιουργήσει ή να αλλάξει. Σε αυτό το άρθρο θα σας πω πώς να βάλετε φόντο σε έναν ιστότοπο.

Δημιουργία νέου φόντου για ιστότοπους

Για να ολοκληρώσετε την εργασία, μπορείτε να χρησιμοποιήσετε μία από τις 4 μεθόδους:

• 1. Φόντο με ένα χρώμα
• 2. Φόντο με υφή
• 3. Φόντο με χρήση ντεγκραντέ
• 4. Φόντο από μεγάλη εικόνα

Δημιουργήστε ένα φόντο χρησιμοποιώντας ένα χρώμα

Για να δημιουργήσετε ή να αλλάξετε το φόντο του ιστότοπου, το οποίο αποτελείται από ένα χρώμα, πρέπει να μεταβείτε στο αρχείο στυλ.css, στο οποίο βρείτε την τιμή - σώμα (είναι υπεύθυνος για το κύριο σώμα του ιστότοπου). Τώρα πρέπει να καταχωρήσετε τη συνάρτηση χρώματος φόντου εάν δεν υπήρχε και να καθορίσετε τον κωδικό χρώματος. Στην περίπτωση που πρέπει να δημιουργήσετε ένα λευκό φόντο για έναν ιστότοπο, θα πρέπει να γράψετε τον ακόλουθο κώδικα:

χρώμα φόντου: #83C5E9 ; (μπλε φόντο, όπως στο παράδειγμα)

Μπορείτε να βρείτε μια πλήρη λίστα χρωμάτων στον ιστότοπο - (STM). Για να αλλάξετε το χρώμα, απλώς αλλάξτε την τιμή μετά την άνω και κάτω τελεία και απολαύστε τις προσπάθειές σας.

Δημιουργία φόντου χρησιμοποιώντας υφή

Αυτή η μέθοδος είναι ιδιαίτερα δημοφιλής τελευταία, καθώς σας επιτρέπει να δημιουργήσετε ένα όμορφο φόντο για τον ιστότοπο. Οι υφές μπορεί να είναι απλές αλλά πολύ όμορφες, γι' αυτό και χρησιμοποιούνται συχνά. Για να συνδέσετε οποιαδήποτε υφή, πρέπει να την ανεβάσετε στο φάκελο εικόνας στο hosting όπου είναι εγκατεστημένος ο ιστότοπός σας. Μετά από αυτό θα πρέπει να γράψετε τον ακόλουθο κώδικα:

χρώμα φόντου: #537759;

background-image: url(images/pattern.png);

Αυτός ο κωδικός περιέχει μια γνωστή παράμετρο για τη διατήρηση του χρώματος (είναι πράσινο) και ένα στοιχείο που είναι υπεύθυνο για τη σύνδεση της πράσινης υφής.

Δημιουργία φόντου χρησιμοποιώντας μια κλίση

Οποιαδήποτε εικόνα που συνδέεται χρησιμοποιώντας συναρτήσεις css μπορεί να επαναληφθεί τόσο οριζόντια όσο και κάθετα (κατά μήκος των αξόνων ΧΚαι Υ). Αυτή η ευκαιρία μας επιτρέπει να δημιουργήσουμε οποιοδήποτε απλό υπόβαθρο για τον ιστότοπο με τα χέρια μας. Για να το κάνετε αυτό, πρέπει να δημιουργήσετε μια διαβάθμιση πλάτους 1 megapixel (δείτε την παρακάτω εικόνα), να την αποθηκεύσετε ως εικόνα και να την ανεβάσετε στη φιλοξενία σας. Μετά από αυτό, μπορείτε να γράψετε τον απαραίτητο κωδικό, δηλαδή:

χρώμα φόντου: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

Σε αυτό το σετ, με σειρά προτεραιότητας, υπάρχει μια συνάρτηση υπεύθυνη για το χρώμα φόντου, την οποία χρησιμοποιούμε για αντασφάλιση. Μετά από αυτό, μια παράμετρος που είναι υπεύθυνη για τη σύνδεση της διαβάθμισης και τέλος, μια συνάρτηση που είναι υπεύθυνη για την επανάληψη της διαβάθμισης κατά μήκος του άξονα Χ.

Χρήση μεγάλης εικόνας για το φόντο του ιστότοπου

Αυτή η μέθοδος είναι η δεύτερη πιο δημοφιλής, καθώς σας επιτρέπει να χρησιμοποιήσετε διάφορες εικόνες για να δημιουργήσετε ένα φόντο. Για να εφαρμόσετε αυτήν τη μέθοδο, χρειάζεται μόνο να ανεβάσετε μια μεγάλη εικόνα στο φάκελο εικόνων του ιστότοπου και να εισαγάγετε τον ακόλουθο κώδικα:

χρώμα φόντου: #000000;

background-image: url(images/image title.jpg);

φόντο-θέση: κεντρική κορυφή.

background-repeat: no-repeat;

Εάν όλα είναι ξεκάθαρα με τις δύο πρώτες παραμέτρους, τότε οι δύο τελευταίες πρέπει να καλυφθούν. Η τρίτη λειτουργία σάς επιτρέπει να διορθώσετε την εικόνα στο κέντρο του ιστότοπου και η τελευταία παράμετρος εμποδίζει την επανάληψη της σε ολόκληρη τη δομή της σελίδας.

Αλλαγή φόντου σε ιστότοπους ucoz

Αυτές οι μέθοδοι δημιουργίας φόντου για έναν ιστότοπο μπορούν να χρησιμοποιηθούν σε διαφορετικά συστήματα διαχείρισης περιεχομένου, αλλά όχι σε ιστότοπους - ucoz. Για να αλλάξετε το φόντο για τον ιστότοπο ucoz, πρέπει να μεταβείτε στον πίνακα ελέγχου του ιστότοπου, μεταβείτε στο "Διαχείριση σχεδιασμού", και μετά μέσα "Επεξεργασία προτύπων".

Τώρα πρέπει να ανοίξετε το Φύλλο στυλ (CSS), να βρείτε τη γραμμή "σώμα"και παράμετρος "Ιστορικό". Μετά από αυτό, πρέπει να αντιγράψετε τον σύνδεσμο, να τον επικολλήσετε στο πρόγραμμα περιήγησής σας στο Διαδίκτυο και θα έχετε πρόσβαση στην εικόνα που ήταν το φόντο.

Για να χρησιμοποιήσετε ένα νέο φόντο, πρέπει απλώς να το ανεβάσετε στη Διαχείριση αρχείων. Ταυτόχρονα, βεβαιωθείτε ότι το όνομα της νέας εικόνας φόντου είναι το ίδιο όπως πριν από την αλλαγή. Αποθηκεύστε την εργασία σας και μεταβείτε στον ιστότοπο για να δείτε την εργασία που έγινε.

Αλλαγή του φόντου για τον ιστότοπο σε HTML

Εάν θέλετε να δημιουργήσετε το φόντο σε έναν ιστότοπο html χρησιμοποιώντας μια εικόνα, τότε απλώς εισαγάγετε τη γραμμή στον κώδικα:

Και αν θέλετε να φτιάξετε το φόντο του ιστότοπου χρησιμοποιώντας χρώμα, τότε η γραμμή θα πρέπει να μοιάζει με αυτό:

Αυτό ολοκληρώνει την ιστορία μας. Τώρα ξέρετε πώς να δημιουργήσετε ένα φόντο για έναν ιστότοπο. Χαρούμενα έργα!

Βλαντ Μέρζεβιτς

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

Φόντο σε μια ιστοσελίδα

Η ρύθμιση μιας εικόνας φόντου σε μια ιστοσελίδα γίνεται παραδοσιακά μέσω του χαρακτηριστικού φόντου της ετικέτας. . Αυτό το μοτίβο επαναλαμβάνεται οριζόντια και κάθετα, γεμίζοντας έτσι ολόκληρο το παράθυρο του προγράμματος περιήγησης. Είναι σαφές ότι δεν υπάρχουν ειδικές επιλογές για δημιουργικότητα εδώ, οπότε ας στραφούμε στα στυλ και ας δούμε τι μπορεί να γίνει χρησιμοποιώντας το CSS.

Το CSS έχει πέντε χαρακτηριστικά που ελέγχουν την εικόνα φόντου: την προσθήκη, τη θέση και την επανάληψη της. Ωστόσο, όλες αυτές οι παράμετροι αντικαθίστανται από μια καθολική ιδιότητα, το background , την οποία θα χρησιμοποιήσουμε στο μέλλον.

Προσθήκη ταπετσαρίας

Η προσθήκη μιας εικόνας πραγματοποιείται ορίζοντας τη διεύθυνση της εικόνας χρησιμοποιώντας τη λέξη-κλειδί url. Για τον έλεγχο της επανάληψης μιας εικόνας, χρησιμοποιούνται τα ορίσματα no-repeat, repeat-x (επανάληψη οριζόντια) και repeat-y (επανάληψη κάθετα). Χάρη σε αυτό, μπορείτε να αποκτήσετε την ιστοσελίδα που φαίνεται στο Σχ. 1.

Για να ορίσετε μια εικόνα σε μια ιστοσελίδα, πρέπει να προσθέσετε μια ιδιότητα στυλ φόντου στον επιλογέα BODY, όπως φαίνεται στο Παράδειγμα 1.

Παράδειγμα 1: Εικόνα φόντου

Σε αυτό το παράδειγμα, το γραφικό target.gif ορίζεται ως το φόντο της ιστοσελίδας χωρίς επανάληψη της εικόνας. Για να αποτρέψετε την προσαρμογή της εικόνας στις άκρες του προγράμματος περιήγησης, μετατοπίζεται κατά 30 εικονοστοιχεία προς τα δεξιά και 20 εικονοστοιχεία προς τα κάτω από την αρχική της θέση.

Επανάληψη ενός μοτίβου

Λόγω του γεγονότος ότι μπορείτε να ρυθμίσετε το μοτίβο φόντου να επαναλαμβάνεται οριζόντια ή κάθετα, υπάρχουν αρκετές επιλογές για το σχεδιασμό ιστοσελίδων. Για παράδειγμα, για να δημιουργήσετε μια κάθετη λωρίδα κατά μήκος της αριστερής άκρης (Εικ. 2), θα χρειαστείτε την εικόνα που φαίνεται στο Σχ. 3.

Το σχέδιο πρέπει να είναι τέτοιο ώστε να ταιριάζει κάθετα μεταξύ τους χωρίς εμφανείς ραφές και επίσης να σχηματίζει ένα ενιαίο σύνολο με το καθορισμένο χρώμα φόντου της ιστοσελίδας. Το Παράδειγμα 2 δείχνει πώς να δημιουργήσετε μια τέτοια εικόνα φόντου, χρησιμοποιώντας ξανά την ιδιότητα φόντου και την τιμή της επανάληψης-y.

Παράδειγμα 2. Επανάληψη του φόντου κάθετα

Ομοίως, μπορείτε να επαναλάβετε το φόντο οριζόντια, για παράδειγμα, δημιουργώντας μια διαβάθμιση και ορίζοντας την ως εικόνα φόντου (Εικ. 4).

Για να λάβετε την ιστοσελίδα που φαίνεται στην Εικ. 4, θα χρειαστεί πρώτα να δημιουργήσετε μια εικόνα με μετάβαση σε κλίση. Το πλάτος είναι αρκετό για να καθορίσετε 20-40 pixel και το ύψος της εικόνας εξαρτάται από τον σκοπό του εγγράφου και το αναμενόμενο ύψος του περιεχομένου της ιστοσελίδας. Μην ξεχνάτε επίσης ότι ένα μεγάλο σχέδιο θα αυξήσει το μέγεθος του αρχείου γραφικών. Και αυτό θα επηρεάσει αρνητικά την ταχύτητα φόρτωσης και, τελικά, θα οδηγήσει σε πιο αργή εμφάνιση στο φόντο. Για αυτήν την περίπτωση, μια εικόνα 30x200 pixel ήταν αρκετά κατάλληλη (Εικ. 5).

Το Παράδειγμα 3 δείχνει τον κώδικα HTML για τη δημιουργία φόντου ντεγκραντέ.

Παράδειγμα 3: Επανάληψη του φόντου οριζόντια

Ένας σχεδιασμός ντεγκραντέ ταιριάζει καλά με ένα μπλοκ συμπαγούς χρώματος, επομένως σε αυτό το παράδειγμα προσθέτουμε ένα επίπεδο για να εμφανίσουμε το περιεχόμενο της ιστοσελίδας.

Προσθήκη εικόνας στο κείμενο

Χρησιμοποιώντας μια εικόνα φόντου, μπορείτε να αυτοματοποιήσετε τη διαδικασία προσθήκης γραφικών σε συγκεκριμένο κείμενο, όπως επικεφαλίδες. Για να το κάνετε αυτό, χρησιμοποιήστε την καθολική ιδιότητα φόντου, η οποία εφαρμόζεται στον επιθυμητό επιλογέα. Η τιμή είναι η διαδρομή προς την εικόνα και, για να μην επαναληφθεί, το όρισμα μη επανάληψης (παράδειγμα 4).

Παράδειγμα 4: Προσθήκη εικόνας

Επικεφαλίδα

Κύριο κείμενο

Όπως φαίνεται σε αυτό το παράδειγμα, το σχέδιο μπορεί να μετακινηθεί οριζόντια και κάθετα από την αρχική του θέση, από προεπιλογή αυτή είναι η επάνω αριστερή γωνία του στοιχείου μπλοκ. Η μετατόπιση φόντου σάς επιτρέπει να τοποθετήσετε την εικόνα σε σχέση με το κείμενο με τον επιθυμητό τρόπο. Για να αποτρέψετε την επικάλυψη του κειμένου της εικόνας, πρέπει να προσθέσετε την ιδιότητα padding-left, λόγω της οποίας το κείμενο μετατοπίζεται προς τα δεξιά κατά την καθορισμένη απόσταση. Είναι ατομικό σε κάθε περίπτωση και συνήθως ισούται με το πλάτος της εικόνας συν το επιθυμητό διάστημα μεταξύ της εικόνας και του κειμένου.

Σε HTML, οι εικόνες εισάγονται χρησιμοποιώντας μια ετικέτα img.
Ετικέτα img- κενό, περιέχει χαρακτηριστικά και δεν έχει ετικέτα κλεισίματος.

Το χαρακτηριστικό χρησιμοποιείται για την εμφάνιση μιας εικόνας στη σελίδα src. Srcπροήλθε από την πηγή, που σημαίνει Πηγή. Η τιμή του χαρακτηριστικού src είναι urlεικόνες.

Η παραπάνω γραμμή σημαίνει ότι η εικόνα βρίσκεται στον ίδιο κατάλογο (φάκελο) με το ίδιο το αρχείο html που συνδέεται με αυτήν την εικόνα. Ας υποθέσουμε ότι έχετε έναν φάκελο html, που περιέχει index.htmlμε τον παραπάνω κωδικό και την ίδια την εικόνα με τον τίτλο image.jpg.

Σε αυτή την περίπτωση, κατά το άνοιγμα index.htmlΘα δείτε αυτήν την εικόνα στο πρόγραμμα περιήγησής σας. Εάν το έχετε κάπου αλλού (έναν φάκελο ψηλότερα ή χαμηλότερα), τότε θα δείτε είτε ένα λευκό πεδίο είτε ένα μικρό ορθογώνιο με κόκκινο σταυρό (δεν ήταν δυνατή η φόρτωση της εικόνας).

Οι εικόνες δεν βρίσκονται πάντα στον ίδιο κατάλογο (φάκελο) με το ίδιο το αρχείο, επομένως ο καθορισμός των διαδρομών θα περιγραφεί πιο συγκεκριμένα λίγο αργότερα.

χαρακτηριστικά ετικέτας img

Εκτός από το src, η ετικέτα img έχει και άλλα χαρακτηριστικά που είναι υπεύθυνα για το μέγεθος της εμφανιζόμενης εικόνας, τη λεζάντα της και ούτω καθεξής.

src- διεύθυνση εικόνας
πλάτος- πλάτος εικόνας
ύψος- ύψος εικόνας
τίτλος- υπογραφή που εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα
alt- εναλλακτικό κείμενο. Απαιτείται για ρομπότ αναζήτησης και ευρετηρίαση εικόνων
σύνορο- πάχος του περιγράμματος της εικόνας. 0 - χωρίς περίγραμμα, 1 - λεπτότερο περίγραμμα κ.λπ.

Διεύθυνση της εισαγόμενης εικόνας (παραδείγματα)

Συνήθως, εικόνεςδεν αποθηκεύονται στον ίδιο φάκελο με το αρχείο html. Για το σκοπό αυτό δημιουργείται ένας φάκελος στον ίδιο κατάλογο εικόνες(ή img, ανάλογα με το γούστο και το χρώμα). Και όλες οι απαραίτητες εικόνες είναι ήδη τοποθετημένες σε αυτό. Στην περίπτωση χωριστού χώρου αποθήκευσης, θα χρειαστεί να καθορίσετε διαφορετική διεύθυνση για το χαρακτηριστικό src

Εάν το αρχείο βρίσκεται στον παραπάνω φάκελο, τότε ναι

Μπορείτε επίσης να εισαγάγετε μια εικόνα από άλλη τοποθεσία εντελώς, χωρίς να την κατεβάσετε στο φάκελό σας. Για να το κάνετε αυτό, πρέπει να έχετε σταθερή σύνδεση στο Διαδίκτυο και περίπου τον ακόλουθο κωδικό, στον οποίο εισάγετε τη διεύθυνση της εικόνας στο Διαδίκτυο στη διεύθυνση:

Εικόνα φόντου σε HTML

Οπως και εικόνα φόντουενδέχεται να εμφανιστούν αρχεία με επεκτάσεις gif, jpg, jpegΚαι png. Εάν το μέγεθος της εικόνας είναι μικρότερο από το παράθυρο του προγράμματος περιήγησης, η εικόνα θα συνεχίσει αυτόματα να γεμίζει το υπόλοιπο φόντο. ΣΕ σώμαχρησιμοποιήστε το χαρακτηριστικό Ιστορικό, στο οποίο καθορίζουμε τη διαδρομή προς την εικόνα