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

Εικόνα ως φόντο σελίδας - HTML

Ας εξετάσουμε πρώτα τη μέθοδο προσδιορισμού εικόνα φόντουστον ιστότοπο χρησιμοποιώντας το χαρακτηριστικό Ιστορικόετικέτα σώμα:

Εδώ η εικόνα φόντου ορίζεται χρησιμοποιώντας το χαρακτηριστικό φόντου της ετικέτας σώματος.

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

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

Εικόνα ως φόντο σελίδας - CSS

ΣΕ CSS φόντοΤο νέο χρώμα και η εικόνα φόντου μπορούν να οριστούν σε μία ιδιότητα Ιστορικό:

Εδώ η εικόνα φόντου ορίζεται χρησιμοποιώντας την ιδιότητα CSS φόντου.

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

Εάν θέλετε να επεκτείνετε την εικόνα φόντου στο πλήρες μέγεθος του παραθύρου του προγράμματος περιήγησης, χρησιμοποιήστε την ιδιότητα Μέγεθος φόντου: 100%;

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

Σε αυτό το σεμινάριο, θα μελετήσουμε λεπτομερώς την τεχνολογία δημιουργίας μιας αποκριτικής εικόνας φόντου που θα καταλαμβάνει ολόκληρη την περιοχή προβολής στο πρόγραμμα περιήγησης σε οποιαδήποτε ανάλυση. Και θα χρησιμοποιήσουμε CSS - την ιδιότητα μεγέθους φόντου. Χωρίς JavaScript:

ΠΑΡΑΔΕΙΓΜΑ
ΚΑΤΕΒΑΣΤΕ ΠΗΓΕΣ

Παραδείγματα χρήσης εικόνων φόντου με απόκριση

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

Sailing Collective

Ψηφιακή Τηλεπάθεια

Εστιατόριο Marianne

Εάν θέλετε να επιτύχετε μια παρόμοια «εμφάνιση» στο έργο σας, είστε στο σωστό δρόμο.

ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ

Εδώ είναι το παιχνίδι μας.

Χρησιμοποιήστε την ιδιότητα μεγέθους φόντου για να καλύψετε ολόκληρη τη θύρα προβολής

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

Χρησιμοποιώντας ένα ερώτημα πολυμέσων για να λάβετε μια μικρότερη έκδοση μιας εικόνας φόντου για κινητές συσκευές

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

Ωστόσο, η χρήση μικρότερων εκδόσεων του φόντου για κινητές συσκευές δεν είναι κακή ιδέα και θα εξηγήσω γιατί.
Η εικόνα που θα χρησιμοποιηθεί στο παράδειγμα έχει μέγεθος περίπου 5500 επί 3600 εικονοστοιχεία.

Με αυτήν την ανάλυση, έχουμε το πλεονέκτημα ότι επιτυγχάνουμε κάλυψη ολόκληρης της περιοχής προβολής στις περισσότερες οθόνες μεγάλου φορμά που παράγονται αυτήν τη στιγμή, αλλά το μειονέκτημα είναι το μέγεθος της εικόνας. Αυτό είναι περίπου 1,7 MB.

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

Ετσι. Ας αρχίσουμε.

HTML

Παρακάτω είναι όλα όσα χρειάζεστε από τη σήμανση:

...Το περιεχόμενο της σελίδας σας...

Θα αντιστοιχίσουμε μια εικόνα φόντου στο στοιχείο του σώματος και έτσι θα πετύχουμε πλήρη κάλυψη φόντου.

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

CSS

Δηλώνουμε τις ιδιότητες του στοιχείου σώματος ως εξής:

body ( /* Θέση της εικόνας φόντου */ φόντο-εικόνα: url(images/background-photo.jpg); /* Η εικόνα φόντου είναι κεντραρισμένη οριζόντια και κάθετα */ θέση φόντου: κέντρο στο κέντρο; /* Το φόντο δεν επαναλαμβάνεται */ background-repeat: no-repeat; /* Το φόντο είναι σταθερό στη θύρα προβολής και επομένως δεν μετακινείται όταν το ύψος του περιεχομένου υπερβαίνει το ύψος της εικόνας */ background-attachment: fixed; /* Αυτή η ιδιότητα προκαλεί φόντο για αλλαγή κλίμακας όταν αλλάζει το μέγεθος του κοντέινερ που περιέχει */ background-size: cover; /* Χρώμα φόντου που θα εμφανίζεται κατά τη φόρτωση μιας εικόνας φόντου */ background-color: #464646; )

Η πιο σημαντική ιδιότητα αξίας σε αυτήν τη λίστα είναι:

Μέγεθος φόντου: εξώφυλλο;

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

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

Και όπως γνωρίζετε, όταν τεντώνουμε μια εικόνα πέρα ​​από το πραγματικό της μέγεθος, χάνουμε την ποιότητα της εικόνας ( με άλλα λόγια, εμφανίζεται το pixelation):

Όταν μια εικόνα κλιμακώνεται προς το αρχικό της μέγεθος, η ποιότητα της εικόνας μειώνεται.

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

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

φόντο-θέση: κέντρο κέντρο;

Αυτό θα ορίσει τους άξονες κλιμάκωσης στο κέντρο της θύρας προβολής.

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

φόντο-συνημμένο: σταθερό;

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

Το μόνο που έχετε να κάνετε είναι να κατεβάσετε το demo και να πειραματιστείτε λίγο με τις ιδιότητες τοποθέτησης ( background-attachment και background-position ) για να δείτε πώς επηρεάζουν τη συμπεριφορά κύλισης της σελίδας και του φόντου.

Οι ακόλουθες τιμές ιδιοκτησίας είναι αυτονόητες.

Συντομογραφία CSS

Παραπάνω, για λόγους σαφήνειας, όρισα πλήρως τις ιδιότητες CSS.

Και έτσι φαίνεται η σύντομη έκδοση:

σώμα ( φόντο: url(background-photo.jpg) κεντρικό κεντρικό κάλυμμα χωρίς επανάληψη διορθώθηκε; )

Το μόνο που έχετε να κάνετε είναι να αλλάξετε την τιμή url στη διαδρομή προς την εικόνα σας.

Προαιρετικό: ερώτημα μέσων για να λάβετε μια μικρότερη έκδοση της εικόνας φόντου

Για οθόνες χαμηλότερης ανάλυσης, θα χρειαστούμε το Photoshop για να μειώσει αναλογικά την ανάλυση της εικόνας στα 768 επί 505 εικονοστοιχεία. Το έτρεξα επίσης μέσω του Smush.it για να μειώσω το μέγεθος του αρχείου. Αυτό επέτρεψε τη μείωση του μεγέθους από 1741 σε 114 kilobyte. Αυτό μείωσε το μέγεθος του αρχείου κατά 93%.

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

Και εδώ είναι το ίδιο το ερώτημα μέσων:

Το βασικό μέρος του ερωτήματος πολυμέσων είναι η ιδιότητα max-width: 767px, που στην περίπτωσή μας σημαίνει ότι εάν η θύρα προβολής του προγράμματος περιήγησης είναι μεγαλύτερη από 767px, χρησιμοποιείται μια μεγάλη εικόνα.

Το μειονέκτημα αυτής της μεθόδου είναι ότι εάν αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης από, για παράδειγμα, 1200px σε 640px (ή αντίστροφα), θα δείτε μια οθόνη που τρεμοπαίζει ενώ φορτώνεται η μικρότερη ή μεγαλύτερη εικόνα.

Και επιπλέον, λόγω του ότι ορισμένοι κινητές συσκευέςμπορεί να λειτουργήσει σε υψηλότερη ανάλυση - για παράδειγμα, ένα iPhone 5 με οθόνη Retina με ανάλυση 1136 επί 640 εικονοστοιχεία, μια μικρότερη εικόνα θα φαίνεται άσχημη.

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

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

Για να ολοκληρώσετε την εργασία, μπορείτε να χρησιμοποιήσετε μία από τις 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 χρησιμοποιώντας μια εικόνα, τότε απλώς εισαγάγετε τη γραμμή στον κώδικα:

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

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

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

Φόντο για την τοποθεσία

Συμβαίνει αυτό παλιό σχέδιοΈχω βαρεθεί ήδη το site. Και θέλω κάτι νέο και νόστιμο. ΕΝΑ νέο σχέδιοέτσι θα είναι αν το μαγειρέψετε με τα χέρια σας.

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

Υπάρχουν διάφοροι τρόποι για να αλλάξετε το φόντο σε έναν ιστότοπο. Για αυτό, χρησιμοποιούνται οι δυνατότητες CSS ή html. Αλλά πολλές από τις ιδιότητες για εργασία με το φόντο έχουν το ίδιο όνομα και μέθοδο εφαρμογής σε αυτές τις τεχνολογίες ιστού.

Τα βασικά της εργασίας με φόντο σε html

Πολλά στοιχεία μπορούν να χρησιμοποιηθούν ως φόντο:

• Χρώμα;
• Εικόνα φόντου;
• Εικόνα υφής.

Ας δούμε τη χρήση καθενός από αυτά με περισσότερες λεπτομέρειες.

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

Υπόβαθρο ιστότοπου #55D52B

Εκτός από τον δεκαεξαδικό χρωματικό κώδικα, υποστηρίζεται μια τιμή σε μορφή λέξης-κλειδιού ή RGB. Παραδείγματα:

Ιστοσελίδα φόντου rgb(23,113,44)

Ιστοσελίδα πράσινο φόντο

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

Η HTML υποστηρίζει μόνο 16 λέξεις-κλειδιά για να ορίσετε χρώματα. Εδώ είναι μερικά από αυτά: λευκό, κόκκινο, μπλε, μαύρο, κίτρινοκαι άλλοι.

Επομένως, για να ορίσετε το φόντο για έναν ιστότοπο html, είναι καλύτερο να χρησιμοποιήσετε μορφή δεκαεξαδικού ή RGB.

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

Ας δούμε τώρα τις δυνατότητες της γλώσσας υπερκειμένου για τη ρύθμιση μιας εικόνας φόντου για έναν ιστότοπο. Αυτό μπορεί να γίνει χρησιμοποιώντας την ιδιότητα background-image.

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

Ας υποθέσουμε ότι αναπτύσσουμε έναν ιστότοπο για την ποίηση και πρέπει να χρησιμοποιήσουμε μια εικόνα του Πήγασου ως φόντο. Το φτερωτό άλογο θα προσωποποιήσει την ελευθερία της δημιουργικής σκέψης του ποιητή!

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

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

• repeat-x – επαναλάβετε την εικόνα φόντου οριζόντια.
• επανάληψη-y – κάθετα.
• επανάληψη – και στους δύο άξονες.
• μη επανάληψη – η επανάληψη απαγορεύεται.

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

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

• Λέξη-κλειδί ( πάνω, κάτω, κέντρο, αριστερά, δεξιά);
• Ποσοστό – η μέτρηση ξεκινά από την επάνω αριστερή γωνία.
• Σε μονάδες μέτρησης (pixel).

Ας χρησιμοποιήσουμε την απλούστερη επιλογή κεντραρίσματος:

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

• πάπυρος;


• σταθερός.

Χρειαζόμαστε την τελευταία τιμή. Τώρα ο κώδικας του παραδείγματος μας θα μοιάζει με αυτό:

Ιστοσελίδα υφή φόντου

Στο πρώτο παράδειγμα χρησιμοποιήσαμε ένα μεγάλο και όμορφο τοπίο της ερήμου για φόντο. Αλλά πρέπει να πληρώσετε πλήρως για μια τέτοια ομορφιά. Βάρος της εικόνας που έγινε μέσα υψηλή ποιότητα, μπορεί να φτάσει αρκετά megabyte.

Αυτός ο τόμος δεν επηρεάζει σε καμία περίπτωση την ταχύτητα φόρτωσης της σελίδας του προγράμματος περιήγησης με σύνδεση Internet υψηλής ταχύτητας. Αλλά τι γίνεται με κινητό internet, που θα πάρει πολύ χρόνο για να φορτώσει αρκετά «μέτρα»;

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

Trepachev D.P. 2012-2020

Προς μαθητές: Έχω διακοπές μέχρι τις 6 Ιανουαρίου, κατά τη διάρκεια των διακοπών θα απαντήσω όσο το δυνατόν περισσότερο,
μερικές φορές μπορεί να εξαφανιστώ για μερικές μέρες

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Βασικό σεμινάριο HTML Αναφορά CSS Αναφορά OOP και MVC Εκμάθηση βίντεο Βασικό σεμινάριο Αναφορά Εκμάθηση βίντεο Βασικό σεμινάριο Βασικό σεμινάριο Βασικό σεμινάριο Βασικό σεμινάριο Εκμάθηση διαχειριστή Εκμάθηση προγραμματιστή PHP Εκμάθηση προγραμματιστή AJAX+

Ιδιότητα συνημμένου φόντου

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

Σύνταξη

Επιλογέας (συνημμένο φόντου: σταθερό | κύλιση | τοπικό; )

Αξίες

Προεπιλεγμένη τιμή: πάπυρος.

Παράδειγμα. Τιμή κύλισης

Τώρα ιδιοκτησία φόντο-συνημμένοοριστεί σε πάπυρος. Κύλιση του στοιχείου κατακόρυφα - θα δείτε το κείμενο με κύλιση μαζί με το φόντο:

body ( background-attachment: scroll; background-image: url("bg.png"); ) #elem (πλάτος: 400px; περιθώριο: 0 auto; text-align: justify; font-weight: bold; font-size: 20 εικονοστοιχεία;)

Παράδειγμα. Τιμή κύλισης

Και τώρα το ακίνητο φόντο-συνημμένοοριστεί σε σταθερός. Κυλήστε το στοιχείο κάθετα και θα δείτε το κείμενο να γλιστράει στο φόντο:

body ( συνημμένο φόντου: σταθερό; εικόνα φόντου: url("bg.png"); ) #elem (πλάτος: 400 εικονοστοιχεία; περιθώριο: 0 αυτόματη; στοίχιση κειμένου: δικαιολογήστε; βάρος γραμματοσειράς: έντονη γραφή; μέγεθος γραμματοσειράς: 20 εικονοστοιχεία;)