Question

还有其他方法可以在section标签中添加背景颜色吗？除了使用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>

我的浏览器上没有显示颜色。

Answer 1

因为#ABC没有任何内容或者没有高度！

见下面我设定高度时发生的事情。

＆＃13;

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

＆＃13;

Answer 2

或者也许他们应该使用渐变色尝试更多的颜色。

<!DOCTYPE html>
<html>

<head>
  <title>Testing</title>
  <style>
    #ABC {
      background-image: linear-gradient(45deg,rgb(218,34,255) 30%,#9733ee 90%);
padding: 1em;
    border-radius: 3px;
    margin: 1em 0;
color: #fff;
    }
  </style>
</head>

<body>
  <section id="ABC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </section>
</body>

</html>

Answer 3

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

如何在部分中添加背景颜色？

3 个答案: