Εικόνα φόντου σε 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 χρησιμοποιώντας το Σημειωματάριο ή οποιοδήποτε άλλο πρόγραμμα επεξεργασίας κειμένου που έχετε συνηθίσει. Για παράδειγμα, ας πάρουμε μια πρωτόγονη σελίδα ιστότοπου με ελάχιστο κείμενο. Μπορείτε να ανοίξετε το αρχείο σας χρησιμοποιώντας οποιοδήποτε πρόγραμμα περιήγησης.

Πρώτα, αλλάξτε το χρώμα του φόντου σας, καθώς τα άτομα με αργή σύνδεση στο Διαδίκτυο δεν θα μπορούν να δουν αμέσως την εικόνα φόντου του ιστότοπου. Για λίγο, ενώ φορτώνει η εικόνα, θα μπορούν να δουν μόνο το χρώμα του ιστότοπού σας.
Εισαγάγετε στην ετικέτα παράμετρος bgcolor=”*****”, όπου ***** είναι ο κωδικός χρώματος. Μπορείτε να μάθετε τα χρώματα για HTML σε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών επιλέγοντας την επιλογή "για τον ιστό" ή στον ιστότοπο https://colorscheme.ru/color-names

Απλά πρέπει να επιλέξετε ένα χρώμα στην παλέτα του κύκλου και να αντιστοιχίσετε την έντασή του μέσα στο τετράγωνο. Στα δεξιά θα δείτε δύο κωδικούς για html. Αντιγράψτε τα και επικολλήστε τα στο σημειωματάριο.

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

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

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

Αντιγράψτε τη διεύθυνση από τη γραμμή αναζήτησης του προγράμματος περιήγησής σας.

Τώρα στην ετικέτα εισάγετε τη γραμμή:

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

Αποθηκεύστε το αρχείο σας.

Ελέγξτε την ιστοσελίδα σας. Θα δείτε ότι το κείμενό σας αντικαθιστά το φόντο.

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

• background-repeat : "Τιμή". Οι επιλογές για την τιμή σας θα μπορούσαν να είναι: "repeat-x" - επαναλαμβάνει την εικόνα φόντου τόσο οριζόντια όσο και κάθετα. "repeat-y" - επανάληψη μόνο κάθετα. "χωρίς επανάληψη" - η εικόνα είναι παγωμένη στη θέση της και δεν επαναλαμβάνεται. "κενό" - ολόκληρη η σελίδα θα γεμίσει με τον μέγιστο αριθμό αντιγράφων της εικόνας, τα πιο εξωτερικά θα περικοπούν. "στρογγυλό" - η ίδια επιλογή, αλλά οι άκρες της εικόνας θα κλιμακωθούν προσεκτικά.
• φόντο-συνημμένο: "Αξία". Εάν αντικαταστήσετε την ετικέτα "κύλιση" αντί της λέξης Τιμή, η εικόνα θα μετακινηθεί μαζί με τον ιστότοπο. "Fixed" - το φόντο παραμένει αμετάβλητο κατά την κύλιση.
• Μέγεθος φόντου: Τιμή Τιμή2. Εδώ οι τιμές πρέπει να λαμβάνουν μια τιμή σε pixel. Για παράδειγμα: 100px 200px. Εκτός από τα εικονοστοιχεία, γίνονται δεκτές και ποσοστιαίες τιμές. Αυτή είναι μια επιλογή για να γεμίσετε τη σελίδα με μια εικόνα. Εκτός από τους αριθμούς, μπορείτε να εισαγάγετε δύο παραμέτρους: "contain" - γεμίζει τη σελίδα με μια εικόνα κατά μήκος της μεγάλης πλευράς και "cover" - γεμίζει τη σελίδα με μια εικόνα κατά μήκος του πλάτους.

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

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

Θέση φόντου

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

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

φόντο-θέση: πάνω δεξιά.

φόντο-θέση: πάνω δεξιά;

Δηλαδή, κάθετα όλα παραμένουν ίδια: η εικόνα φόντου βρίσκεται στην κορυφή, αλλά οριζόντια αλλάξαμε την πλευρά προς τα δεξιά, δηλαδή δεξιά. Ένας άλλος τρόπος για να ορίσετε μια θέση είναι ως ποσοστό. Σε αυτή την περίπτωση, η αντίστροφη μέτρηση ξεκινά σε κάθε περίπτωση από την επάνω αριστερή γωνία. 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 εικονοστοιχείων ενδέχεται να δουν μη βέλτιστη ποιότητα εικόνας.

Να σας υπενθυμίσω, θα τεντωθεί στο μέγιστο πλάτος του. Κατά συνέπεια, η ποιότητα θα επιδεινωθεί αυτόματα. Η μόνη σωστή λύση εδώ θα ήταν να χρησιμοποιήσετε αρχικά μια μεγαλύτερη εικόνα – πλάτους 1920 pixel. Στη συνέχεια, στις πιο φαρδιές οθόνες θα είναι στο φυσικό της μέγεθος και σε άλλες απλά θα αποκοπεί σταδιακά, αλλά ταυτόχρονα, εάν η εικόνα φόντου είναι σωστά επιλεγμένη, αυτό δεν θα επηρεάσει την εμφάνιση του ιστότοπου.

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

Ημιδιαφανές φόντο με χρήση css

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

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

Όπως είπα νωρίτερα, υπάρχουν πολλές μορφές για τη ρύθμιση των χρωμάτων στο CSS. Ένα από αυτά είναι το rgb, μια αρκετά γνωστή μορφή για όσους εργάζονται σε γραφικούς επεξεργαστές. Είναι γραμμένο ως εξής: rgb(17, 255, 34);

Η πρώτη τιμή στις αγκύλες είναι ο κορεσμός του κόκκινου, μετά πράσινου και μετά μπλε. Η τιμή μπορεί να είναι αριθμητική από 0 έως 255. Κατά συνέπεια, η μορφή rgba δεν διαφέρει, προστίθεται μόνο μία ακόμη παράμετρος - το κανάλι άλφα. Η τιμή μπορεί να είναι από 0 έως 1, όπου το 0 είναι πλήρης διαφάνεια.

17.10.2015

Οχι ακόμα

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

Χρώμα φόντου σε HTML

Το προεπιλεγμένο χρώμα φόντου σε ένα έγγραφο HTML είναι το λευκό. Πώς να ρυθμίσετε το χρώμα όπως θέλετε;
Το χαρακτηριστικό "bgcolor" θα μας βοηθήσει σε αυτό. Για να ζωγραφίσετε το φόντο, προσθέστε αυτό το χαρακτηριστικό στην ετικέτα "body":

Ή όπως αυτό:

Εδώ είναι ο πλήρης κώδικας HTML:

Το κείμενο της σελίδας θα είναι πράσινο και το φόντο μαύρο.

Το αποτέλεσμα θα είναι ως εξής:

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

Συμπληρώστε οποιαδήποτε εικόνα όπου βρίσκεται η ιστοσελίδα σας (στο παράδειγμά μου, η σελίδα ονομάζεται "fon" με την επέκταση ".gif"):

Εδώ είναι ο πλήρης κώδικας HTML:

Το αποτέλεσμα θα είναι ως εξής:

Εάν η εικόνα φόντου βρίσκεται στο φάκελο εικόνων ή σε κάποιον άλλο φάκελο, θα μοιάζει με αυτό:

Εδώ είναι ο πλήρης κώδικας HTML:

Κείμενο σελίδας σε όμορφο φόντο.

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

Προηγούμενη ανάρτηση
Επόμενη καταχώρηση

Σε 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. Εάν το μέγεθος της εικόνας είναι μικρότερο από το παράθυρο του προγράμματος περιήγησης, η εικόνα θα συνεχίσει αυτόματα να γεμίζει το υπόλοιπο φόντο. ΣΕ σώμαχρησιμοποιήστε το χαρακτηριστικό Ιστορικό, στο οποίο καθορίζουμε τη διαδρομή προς την εικόνα