web-dev-qa-db-fra.com

Comment ajouter de la couleur de fond dans une partie de section?

Existe-t-il un autre moyen d'ajouter une couleur de fond dans la balise de section? Sauf en utilisant body {background-color: blue;}, quelles sont les autres façons d’ajouter de la couleur d’arrière-plan à la section?

J'essaie d'ajouter la couleur de fond de la section comme ceci:

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

Aucune couleur ne s'affiche sur mon navigateur.

htmlcsshtml5css3css-position
4
R3y

C'est parce que #ABC n'a pas de contenu ou n'a pas de hauteur!

Voir ci-dessous ce qui s’est passé quand j’y ai mis une hauteur.

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

L'élément <section> est un conteneur de regroupement. Dans votre exemple, il n'y a pas de contenu et il n'est donc pas visible (j'ai ajouté une bordure de couleur rouge pour mettre en surbrillance le<section>).

Mettre en surbrillance le <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>

Essayez d’ajouter height ou du contenu à votre <section> pour que la couleur d’arrière-plan soit visible.

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