Tutorial HTML Background Color - Πώς να αλλάξετε ένα χρώμα φόντου Div, που εξηγείται με παραδείγματα κώδικα

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

Στο άρθρο, συζητάμε

  • την προεπιλεγμένη τιμή χρώματος φόντου ενός στοιχείου HTML
  • πώς να αλλάξετε το χρώμα φόντου ενός div, το οποίο είναι ένα πολύ κοινό στοιχείο
  • ποια τμήματα του μοντέλου πλαισίου CSS επηρεάζονται από την background-colorιδιότητα και
  • τις διαφορετικές τιμές που μπορεί να λάβει αυτή η ιδιότητα.

Προεπιλεγμένο χρώμα φόντου ενός στοιχείου

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

Αλλαγή του χρώματος φόντου ενός Div

Σε αυτό το παράδειγμα, θα αλλάξουμε τα χρώματα φόντου των παρακάτω div.

 I love HTML I love CSS I love JavaScript 

Χωρίς στυλ, αυτό θα μεταφραστεί οπτικά στα ακόλουθα.

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

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

Αυτό θα έχει ως αποτέλεσμα τα εξής:

Δροσερός! Αλλάξαμε με επιτυχία το χρώμα φόντου αυτού του div. Στη συνέχεια, ας μάθουμε περισσότερα για αυτήν την ιδιότητα. Ας δούμε πώς η ιδιότητα χρώματος φόντου επηρεάζει τμήματα του μοντέλου CSS-box.

Χρώμα φόντου και το μοντέλο CSS Box

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

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

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

Αυτό θα έχει ως αποτέλεσμα:

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

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

Τιμές φόντου-χρώματος

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

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Παρατηρήστε ότι όλα έχουν αποτέλεσμα με το ίδιο χρώμα φόντου.

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

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

Μπορείτε να διαβάσετε περισσότερα για καθεμία από αυτές τις τιμές εδώ.

Επιπλέον σημείωση

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

Εξετάστε αυτά τα δύο div.

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

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

συμπέρασμα

Σε αυτό το άρθρο, είδαμε πώς μπορείτε να αλλάξετε το χρώμα φόντου ενός div. Συζητήσαμε επίσης ποια μέρη του μοντέλου CSS box επηρεάζονται από την αλλαγή στο χρώμα φόντου. Τέλος, συζητήσαμε τις τιμές που μπορεί να πάρει η ιδιότητα χρώματος φόντου.

Ελπίζω να βρείτε αυτό το άρθρο χρήσιμο. Ευχαριστώ για την ανάγνωση.