Πώς να αλλάξετε το χρώμα φόντου με CSS

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

Η εργασία με HTML είναι υπέροχη και όλα, αλλά με λίγες μόνο γραμμές CSS μπορείτε να κάνετε τις σελίδες σας και το ταξίδι προγραμματισμού σας να ανθίσουν.

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

Get Set Up

Ας ρίξουμε μια μικρή προκαταρκτική εργασία.

πώς να κερδίσετε χρήματα από βιντεοπαιχνίδια

Σημείωση : Συνιστώ τη χρήση Κωδικός Visual Studio με την Επέκταση Live Server για προβολή αλλαγών σε πραγματικό χρόνο καθώς ενημερώνετε το HTML και το CSS.

Δημιουργήστε έναν φάκελο για τα αρχεία του έργου σας.
Δημιουργήστε ένα index.html αρχείο για να στεγάσει το HTML σας. Μπορείτε να χρησιμοποιήσετε κώδικα boilerplate ή απλώς να ρυθμίσετε ορισμένους , , και ετικέτες.
Δημιουργώ ένα styles.css αρχείο για το CSS σας.
Συνδέστε το αρχείο CSS με το HTML τοποθετώντας μεσα στην ετικέτες.

Τώρα είστε έτοιμοι να ξεκινήσετε την επεξεργασία του CSS.

Σχετίζεται με: Πώς να δημιουργήσετε έναν ιστότοπο Boilerplate

Πώς να αλλάξετε το χρώμα φόντου με CSS

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

body {  
 background-color: rgb(191, 214, 255);  
}

Αυτός ο κώδικας αλλάζει το φόντο σε ένα ωραίο γαλάζιο.

ο χρώμα του φόντου Η ιδιότητα δέχεται χρώματα σε έξι διαφορετικές μορφές:

όνομα : φωτεινό μπλε? (για στενή προσέγγιση)
δεκαεξαδικός κώδικας : # bfd6ff;
rgb : rgb (191, 214, 255);
rgba : rgba (191, 214, 255, 1); όπου προς το είναι άλφα (αδιαφάνεια)
HSL : hsl (218 °, 100%, 87%);
HSLA : hsla (218 °, 100%, 87%, 1); όπου προς το είναι άλφα (αδιαφάνεια)

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

Δημιουργώ ένα στοιχείο και δώστε του μια κλάση - στην περίπτωση αυτή, η κλάση είναι πίνακας Το Ορίστε το ύψος και πλάτος ιδιότητες στο CSS. Επιλέξτε το στοιχείο στο CSS και το χρώμα μακριά.

body {  
 background-color: rgb(191, 214, 255);  
}  
.container{  
 display: flex;  
 justify-content: center;  
 align-items: center;  
 height: 90vh;  
}  
.panel {  
 background: rgb(255, 148, 148);  
 height: 10rem;  
 width: 30%;  
}  
.muo-text {  
 font-size: 3em;  
 font-weight: bolder;  
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
 position: absolute;  
}

Εδώ μπορείτε να δείτε το σώμα Ιστορικό το ακίνητο είναι σχεδιασμένο ανεξάρτητα από το .πίνακας Ιστορικό ιδιοκτησία.

Η ιδιότητα φόντου δέχεται επίσης κλίσεις:

body {  
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);  
}

Πώς να αλλάξετε την εικόνα φόντου στο CSS

Τι γίνεται αν θέλετε το φόντο να είναι μια εικόνα και όχι ένα μονόχρωμο ή κλίση; Η στενογραφία Ιστορικό το ακίνητο είναι ένας γνωστός φίλος.

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

body {  
 background: url(leaves-and-trees.jpg)  
}

Ουάου! Φαίνεται ότι η εικόνα είναι πολύ μεγεθυμένη. Μπορείτε να το διορθώσετε με το μέγεθος φόντου ιδιοκτησία.

body {  
 background: url(leaves-and-trees.jpg);  
 background-size: cover;  
}

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

body {  
 background: url(leaves-and-trees.jpg) top left / cover;  
}

Ορίστε! Μια σωστά μεγέθους εικόνα φόντου σε μία γραμμή CSS.

Διαβάστε περισσότερα: Πώς να ορίσετε μια εικόνα φόντου στο CSS

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

Ανεβάστε το παιχνίδι CSS με CSS πλαίσιο-σκιά

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

Δοκιμάστε να δώσετε ώθηση στα κουτιά σας με το CSS box-shadow. Τα στοιχεία HTML σας δεν φαίνονταν ποτέ καλύτερα!

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να χρησιμοποιήσετε το CSS box-shadow: 13 κόλπα και παραδείγματα

Τα ήπια κουτιά φαίνονται βαρετά. Ελάτε τους με το εφέ CSS box-shadow!

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
Ανάπτυξη διαδικτύου
Σχεδιασμός Ιστού
CSS

Σχετικά με τον Συγγραφέα Marcus Mears III(Δημοσιεύθηκαν 26 άρθρα)

Ο Marcus είναι λάτρης της δια βίου τεχνολογίας και συγγραφέας συγγραφέας στο MUO. Ξεκίνησε την ανεξάρτητη καριέρα συγγραφής το 2020, καλύπτοντας την τάση της τεχνολογίας, των gadget, των εφαρμογών και του λογισμικού. Σπούδασε Επιστήμη Υπολογιστών στο κολέγιο με έμφαση στην ανάπτυξη ιστοσελίδων.

Περισσότερα από τον Marcus Mears III

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή