web-dev-qa-db-de.com

Wie füge ich Hintergrundfarbe in einem Abschnitt hinzu?

Gibt es eine andere Möglichkeit, Hintergrundfarbe im Abschnitts-Tag hinzuzufügen? Was sind andere Möglichkeiten, Hintergrundfarbe in einem Abschnitt hinzuzufügen, außer body {background-color: blue;}?

Ich versuche, die Hintergrundfarbe des Abschnitts wie folgt hinzuzufügen:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <style>
            #ABC {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <section id="ABC">
        </section>
    </body>
</html>

In meinem Browser wird keine Farbe angezeigt.

htmlcsshtml5css3css-position
4
R3y

Sein, weil #ABC keinen Inhalt hat oder keine Höhe hat!

Siehe unten, was passiert ist, wenn ich eine Höhe eingestellt habe.

<!DOCTYPE html>
<html>
  <head>
    <title>Testing</title>

    <style>

    #ABC {
      background-color: blue;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    body{
      background: grey;
      margin: 0;
    } 

    </style>

  </head>

  <body>

<section id="ABC">


</section>

  </body>
</html>

5
kukkuz

Das <section>-Element ist ein Gruppierungscontainer. In Ihrem Beispiel ist kein Inhalt vorhanden und daher nicht sichtbar (Ich habe einen roten Rand hinzugefügt, um<section> hervorzuheben).

Den <section> hervorheben: 

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <style>
    #ABC {
      background-color: blue;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <section id="ABC">

  </section>
</body>

</html>

Fügen Sie height oder Inhalt zu Ihrem <section> hinzu, damit die Hintergrundfarbe sichtbar wird.

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <style>
    #ABC {
      background-color: blue;
    }
  </style>
</head>

<body>
  <section id="ABC">
    Some text here
  </section>
</body>

</html>

0
Pugazh