Tutorial zur HTML-Hintergrundfarbe - Ändern einer Div-Hintergrundfarbe anhand von Codebeispielen

Als Webentwickler müssen Sie möglicherweise am häufigsten die Hintergrundfarbe eines HTML-Elements ändern. Es kann jedoch verwirrend sein, wenn Sie nicht verstehen, wie die CSS- background-colorEigenschaft verwendet wird.

In dem Artikel diskutieren wir

  • Der Standardwert für die Hintergrundfarbe eines HTML-Elements
  • wie man die Hintergrundfarbe eines div ändert, was ein sehr häufiges Element ist
  • Welche Teile des CSS-Box-Modells von der background-colorEigenschaft betroffen sind , und
  • die verschiedenen Werte, die diese Eigenschaft annehmen kann.

Standardhintergrundfarbe eines Elements

Die Standardhintergrundfarbe eines Div ist transparent. Wenn Sie also die Hintergrundfarbe eines Div nicht angeben, wird die des übergeordneten Elements angezeigt.

Ändern der Hintergrundfarbe eines Div

In diesem Beispiel ändern wir die Hintergrundfarben der folgenden Divs.

 I love HTML I love CSS I love JavaScript 

Ohne Styling wird dies visuell wie folgt übersetzt.

Ändern Sie die Hintergrundfarbe der Divs, indem Sie den Klassen Stile hinzufügen. Sie können den Beispielen in einer HTML-Datei folgen.

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

Dies führt zu Folgendem:

Cool! Wir haben die Hintergrundfarbe dieses Div erfolgreich geändert. Lassen Sie uns als Nächstes mehr über diese Eigenschaft erfahren. Mal sehen, wie sich die Eigenschaft Hintergrundfarbe auf Teile des CSS-Box-Modells auswirkt.

Hintergrundfarbe und das CSS-Box-Modell

Gemäß dem CSS-Box-Modell können alle HTML-Elemente als rechteckige Boxen modelliert werden. Jede Box besteht aus 4 Teilen, wie in der folgenden Abbildung gezeigt.

Sie können das Box-Modell nachlesen, wenn Sie nicht damit vertraut sind. Die Frage ist, welcher Teil des Box-Modells betroffen ist, wenn Sie die Hintergrundfarbe eines Div ändern. Die einfache Antwort ist der Auffüllbereich und der Inhaltsbereich. Lassen Sie uns dies anhand eines Beispiels bestätigen.

  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.

Dies führt zu:

Aus dem obigen Beispiel können wir erkennen, dass der Randbereich und der Randbereich von der Änderung der Hintergrundfarbe nicht betroffen sind. Wir können die Farbe des Rahmens mithilfe der Eigenschaft border-color ändern. Der Randbereich bleibt transparent und spiegelt die Hintergrundfarbe des übergeordneten Containers wider.

Lassen Sie uns abschließend die Werte diskutieren, die die Hintergrundfarben-Eigenschaft annehmen kann.

Hintergrundfarbwerte

Genau wie die Farbeigenschaft kann die Hintergrundfarbeneigenschaft sechs verschiedene Werte annehmen. Betrachten wir die drei häufigsten Werte anhand eines Beispiels. Im Beispiel setzen wir die Hintergrundfarbe des Div auf Rot mit unterschiedlichen Werten.

 /* 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.

Beachten Sie, dass sie alle dieselbe Hintergrundfarbe haben.

Andere Werte, die die background-colorEigenschaft annehmen kann, umfassen HSL-Wert, spezielle Schlüsselwortwerte und globale Werte. Hier sind Beispiele für jeden von ihnen.

/* 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; 

Weitere Informationen zu diesen Werten finden Sie hier.

Zusätzlicher Hinweis

Beim Festlegen der Hintergrundfarbe eines Elements ist darauf zu achten, dass das Kontrastverhältnis der Hintergrundfarbe und der Farbe des darin enthaltenen Textes hoch genug ist. Dies soll sicherstellen, dass Menschen mit Sehbehinderung den Text leicht lesen können.

Betrachten Sie diese beiden Divs.

Der Kontrast zwischen der Hintergrundfarbe des ersten Div und der Farbe des Textes ist nicht hoch genug, damit jeder sie sehen kann. Wenn Sie also nicht der einzige sind, der die von Ihnen erstellte Website nutzt und ein sehr gutes Sehvermögen hat, sollten Sie solche Farbkombinationen vermeiden.

Das zweite Div hat ein viel besseres Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des Textes. Somit ist es für die Menschen zugänglicher und klarer zu lesen.

Fazit

In diesem Artikel haben wir gesehen, wie Sie die Hintergrundfarbe eines Div ändern können. Wir haben auch diskutiert, welche Teile des CSS-Box-Modells von der Änderung der Hintergrundfarbe betroffen sind. Schließlich haben wir die Werte besprochen, die die Hintergrundfarben-Eigenschaft annehmen kann.

Ich hoffe, Sie fanden diesen Artikel hilfreich. Danke fürs Lesen.