Περιεχόμενο

• Για να πας
• Μέθοδος 1 από 4: Ρύθμιση ενός στερεού χρώματος φόντου
• Μέθοδος 2 από 4: Χρήση μιας εικόνας ως φόντο
• Μέθοδος 3 από 4: Δημιουργήστε ένα φόντο κλίσης
• Μέθοδος 4 από 4: Ορίστε μια έγχρωμη κινούμενη εικόνα ως ταπετσαρία

Για να μπορέσετε να ορίσετε το φόντο μιας ιστοσελίδας σε HTML, απλά πρέπει να κάνετε μια μικρή αλλαγή στο στοιχείο "body" μέσα στο style> / style> ετικέτες. Τα βήματα εξαρτώνται από το πώς θέλετε να φαίνεται η ταπετσαρία σας. Μάθετε πώς μπορείτε να ορίσετε το φόντο του ιστότοπού σας ως στερεό χρώμα, εικόνα, κλίση ή έγχρωμο κινούμενο σχέδιο.

Για να πας

Μέθοδος 1 από 4: Ρύθμιση ενός στερεού χρώματος φόντου

1. Ανοίξτε το αρχείο HTML στο αγαπημένο σας πρόγραμμα επεξεργασίας κειμένου. Από το HTML5, το χαρακτηριστικό HTML bgcolor> δεν υποστηρίζεται πλέον. Το χρώμα φόντου, όπως και όλες οι άλλες πτυχές στυλ της σελίδας σας, πρέπει να οριστεί με CSS.
2. Πρόσθεσε το style> / style> επισημαίνει το έγγραφό σας. Όλα τα δεδομένα στυλ για τη σελίδα σας (συμπεριλαμβανομένου του χρώματος φόντου) πρέπει να κωδικοποιούνται σε αυτές τις ετικέτες. Έχετε το στυλ> οι ετικέτες που έχουν ήδη αναφερθεί, τότε μπορείτε απλώς να μεταβείτε σε αυτό το τμήμα του αρχείου.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Πληκτρολογήστε το στοιχείο "body" μέσα στο style> / style> ετικέτες. Οτιδήποτε αλλάξετε στο στοιχείο "body" στο CSS θα επηρεάσει ολόκληρη τη σελίδα.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Προσθέστε την ιδιότητα "background-color" στο στοιχείο "body". Σε αυτό το πλαίσιο, μόνο μια ορθογραφία του "χρώματος" θα λειτουργήσει (όχι: χρώμα).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Τοποθετήστε το επιθυμητό χρώμα φόντου πίσω από το "χρώμα φόντου". Τώρα μπορείτε να υποδείξετε το όνομα ενός χρώματος (πράσινος, μπλε, εκδ, χρησιμοποιήστε δεκαεξαδικούς (δεκαεξαδικούς) κωδικούς (π.χ. #000000 για μαύρο, # ff0000 για κόκκινο, κ.λπ.) ή πληκτρολογώντας την τιμή RGB για το χρώμα (όπως rgb (255.255,0) για κίτρινο). Ακολουθεί ένα παράδειγμα με δεκαεξαδικούς κωδικούς, κάνοντας το φόντο ίδιο με το banner wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Λευκό: #FFFFFF
   • Ανοιχτό ροζ: # FFCCE6
   • Καμένη Σιένα: #993300
   • Ίντιγκο - # 4Β0082
   • Βιολετί - # EE82EE
   • Ρίξτε μια ματιά στο w3schools.com HTML Color Picker για να βρείτε τους δεκαεξαδικούς κωδικούς οποιουδήποτε χρώματος θέλετε.
6. Χρησιμοποιήστε το "φόντο-χρώμα" για να εφαρμόσετε χρώματα φόντου σε άλλα στοιχεία. Ακριβώς όπως ορίζετε το στοιχείο αμαξώματος, μπορείτε να χρησιμοποιήσετε το χρώμα φόντου για να ορίσετε το φόντο άλλων στοιχείων. Απλά τοποθετήστε αυτά τα στοιχεία στο style> / style> με την ιδιότητα χρώματος φόντου.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {φόντο-χρώμα: πορτοκαλί; } p {φόντο-χρώμα: rgb (255,0,0); } / style> / head> body> h1> Αυτή η κεφαλίδα έχει πορτοκαλί φόντο / h1> p> Αυτή η παράγραφος λαμβάνει κόκκινο φόντο / p> / body> / html>

Μέθοδος 2 από 4: Χρήση μιας εικόνας ως φόντο

1. Ανοίξτε το αρχείο HTML σε πρόγραμμα επεξεργασίας κειμένου. Πολλοί άνθρωποι προτιμούν να χρησιμοποιούν μια εικόνα ως φόντο για τον ιστότοπό τους. Με αυτό μπορείτε να ορίσετε ένα μοτίβο, υφή, φωτογραφία ή οποιαδήποτε άλλη εικόνα ως φόντο. Από το HTML5, όλα τα υπόβαθρα πρέπει να οριστούν με CSS (Cascading Style Sheets) μέσα στο style> / style> ετικέτες.
2. Πρόσθεσε το style> / style> ετικέτες στο αρχείο HTML. Όλα τα δεδομένα στυλ για τη σελίδα σας (συμπεριλαμβανομένου του χρώματος φόντου) πρέπει να αναφέρονται σε αυτές τις ετικέτες. Το έχεις ήδη στυλ> καθορισμένες ετικέτες, μεταβείτε σε αυτό το τμήμα του αρχείου.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Πληκτρολογήστε το στοιχείο "body" μέσα στο style> / style> ετικέτες. Οτιδήποτε αλλάξετε στο στοιχείο "body" στο CSS θα επηρεάσει ολόκληρη τη σελίδα.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Προσθέστε την ιδιότητα "background-image" στο στοιχείο "body". Κατά την προσθήκη αυτής της ιδιότητας, θα χρειαστείτε το όνομα αρχείου της εικόνας σας. Βεβαιωθείτε ότι η εικόνα είναι αποθηκευμένη στον ίδιο φάκελο με το αρχείο html (ή προσθέστε την πλήρη διαδρομή στο αρχείο στον διακομιστή ιστού σας).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); χρώμα φόντου: # 93B874; } / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); χρώμα φόντου: # 93B874; } / style> / head> body> / body> / html>

   • Η πρώτη εικόνα βρίσκεται στην κορυφή. Η δεύτερη εικόνα είναι κάτω από την πρώτη.

Μέθοδος 3 από 4: Δημιουργήστε ένα φόντο κλίσης

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

   φόντο: γραμμική κλίση (κατεύθυνση / γωνία, χρώμα1, χρώμα2, χρώμα3 κ.λπ.) ·

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

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Αυτό απαιτείται για να διασφαλιστεί ότι η κλίση καλύπτει ολόκληρη τη σελίδα * /} σώμα {φόντο: -webkit-linear-gradient (# 93B874, # C9DCB9) / * Chrome 10+, Safari 5.1+ * / φόντο: -o-γραμμική-κλίση (# 93B874, # C9DCB9); / * Opera 11.1+ * / φόντο: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / φόντο: γραμμική διαβάθμιση (# 93B874, # C9DCB9); / * Προεπιλεγμένη σύνταξη (πρέπει να είναι η τελευταία) * / background-color: # 93B874; / * Είναι καλή ιδέα να ορίσετε ένα χρώμα φόντου, σε περίπτωση που η κλίση δεν φορτώνει * /} / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } σώμα {φόντο: -webkit-linear-gradient (αριστερά, # 93B874, # C9DCB9); / * από αριστερά προς τα δεξιά * / φόντο: -o-γραμμική-κλίση (δεξιά, # 93B874, # C9DCB9); / * τέλος στα δεξιά * / φόντο: -moz-linear-gradient (δεξιά, # 93B874, # C9DCB9); / * τέλος στα δεξιά * / φόντο: γραμμική-κλίση (προς τα δεξιά, # 93B874, # C9DCB9); / * μετακινείται προς τα δεξιά * / φόντο-χρώμα: # 93B874; / * Είναι καλή ιδέα να ορίσετε ένα χρώμα φόντου, σε περίπτωση που η κλίση δεν φορτώσει * /} / style> / head> body> / body> / html>

5. Χρησιμοποιήστε άλλες ιδιότητες για να ρυθμίσετε την κλίση. Μπορείτε να κάνετε πολύ περισσότερα με κλίσεις.
   • Για παράδειγμα, δεν μπορείτε να χρησιμοποιήσετε μόνο περισσότερα από δύο χρώματα, αλλά και να τοποθετήσετε ένα ποσοστό πίσω από κάθε χρώμα. Με αυτό μπορείτε να υποδείξετε πόσο χώρο θα πάρει κάθε τμήμα χρώματος.

     φόντο: γραμμική κλίση (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Προσθέστε διαφάνεια στα χρώματα. Με αυτό μπορείτε να ξεθωριάσετε τα χρώματα. Χρησιμοποιήστε το ίδιο χρώμα για να ξεθωριάσετε από το χρώμα στο τίποτα. Θα λατρέψετε τη λειτουργία rgba () πρέπει να χρησιμοποιήσετε για να υποδείξετε το χρώμα. Η τελική τιμή καθορίζει το βαθμό διαφάνειας: 0 για αδιαφανές και 1 για διαφανή.

     φόντο: γραμμική κλίση (προς τα δεξιά, rgba (147,184,116,0), rgba (147,184,116,1));

Μέθοδος 4 από 4: Ορίστε μια έγχρωμη κινούμενη εικόνα ως ταπετσαρία

1. Μεταβείτε στο στυλ> στον κώδικα HTML σας. Εάν βρείτε ένα συμπαγές χρώμα φόντου αλλά όχι, πειραματιστείτε με την αλλαγή φόντου χρώματος. Από το HTML 5, τα χρώματα φόντου πρέπει να οριστούν με CSS (Cascading Style Sheets). Εάν δεν έχετε ορίσει ποτέ χρώμα φόντου με CSS, διαβάστε την ενότητα για τη ρύθμιση ενός στερεού χρώματος φόντου πριν δοκιμάσετε αυτήν τη μέθοδο.
2. Προσθέστε το ακίνητο κινουμένων σχεδίων στο στοιχείο "σώμα". Θα πρέπει να προσθέσετε 2 διαφορετικές ιδιότητες, καθώς κάθε πρόγραμμα περιήγησης απαιτεί διαφορετικό κώδικα.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animation: colorchange 60s άπειρη? } / style> / head> body> / body> / html>

   • -webkit-κινούμενα σχέδια η ιδιότητα απαιτείται για προγράμματα περιήγησης που βασίζονται σε Chrome (Chrome, Opera, Safari). κινουμένων σχεδίων είναι το πρότυπο για όλα τα άλλα προγράμματα περιήγησης.
   • αλλαγή χρώματος είναι αυτό που ονομάζεται animation σε αυτό το παράδειγμα.
   • Δεκαετία του '60 είναι η διάρκεια (60 δευτερόλεπτα) της κίνησης / μετάβασης. Φροντίστε να το ορίσετε τόσο για το webkit όσο και για την προεπιλεγμένη σύνταξη.
   • άπειρος υποδεικνύει ότι το κινούμενο σχέδιο πρέπει να επαναληφθεί επ 'αόριστον. Εάν προτιμάτε να βγάλετε τα χρώματα και μετά να σταματήσετε στο τελευταίο χρώμα, μπορείτε να παραλείψετε αυτό το μέρος.
3. Προσθέστε χρώματα στην κινούμενη εικόνα σας. Τώρα πρόκειται να χρησιμοποιήσετε τον κανόνα @keyframes για να ορίσετε τα χρώματα φόντου για να περάσετε, καθώς και για πόσο χρονικό διάστημα μπορεί να δει κάθε χρώμα στη σελίδα. Και πάλι, θα πρέπει να προσθέσετε πολλές κωδικοποιήσεις για τα διάφορα προγράμματα περιήγησης.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animation: colorchange 60s άπειρη? } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {φόντο: # 117A65;} 75% {φόντο: # DC7633;} 100% {φόντο: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {φόντο: # 117A65;} 75% {φόντο: # DC7633;} 100% {φόντο: # 9B59B6;}} / style> / head> body> / body> / html>

   • Σημειώστε ότι οι δύο γραμμές (@ -webkit-keyframes και @keyframes έχουν τις ίδιες τιμές για τα χρώματα και τα ποσοστά φόντου. Θα πρέπει να παραμείνει ομοιόμορφο, έτσι ώστε η εμπειρία να παραμένει η ίδια για όλα τα προγράμματα περιήγησης.
   • Τα ποσοστά (0%, 25%, κλπ.) αντιπροσωπεύουν τη συνολική διάρκεια της κινούμενης εικόνας (Δεκαετία του '60). Όταν φορτώνεται η σελίδα, το φόντο θα έχει το χρώμα 0% και (# 33FFF3). Όταν παίξει το 25% ή 60 δευτερόλεπτα της κινούμενης εικόνας, το φόντο θα μεταβεί σε # 78281F, και ούτω καθεξής.
   • Μπορείτε να προσαρμόσετε τη διάρκεια και τα χρώματα όπως θέλετε.