it-roy-ru.com

Как добавить фоновый цвет в часть раздела?

Есть ли другой способ добавить цвет фона в тег раздела? За исключением использования body {background-color: blue;}, как можно добавить цвет фона в раздел?

Я пытаюсь добавить цвет фона раздела:

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

В моем браузере нет цветного изображения.

4
R3y

Это потому, что #ABC не имеет никакого содержимого или не имеет высоты!

Смотрите ниже, что случилось, когда я установил для него высоту.

<!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

Элемент <section> является контейнером группировки. В вашем примере нет содержимого и, следовательно, оно не видно (Я добавил красную рамку для выделения<section>).

Выделение <section>:

<!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>

Попробуйте добавить height или содержимое к своему <section>, чтобы фоновый цвет был видимым.

<!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