背景颜色不显示答案

【问题标题】：Background color is not showing背景颜色不显示
【发布时间】：2021-10-19 09:39:21
【问题描述】：

我正在尝试构建一个表单。我想为此添加背景颜色，但该颜色正在页面中显示。

我尝试了清除、阻止和一切。当我检查时，它显示背景颜色有效，但它没有显示页面上的颜色。

这是 HTML 代码：

<?php //include 'session.php'; ?>
<html>
<head>
  <title>User Edit Form</title>
  <link href="css/style.css" rel='stylesheet' type='text/css' />
</head>

<body class="UserEdit">
  <div class=" container">
    <div class="edit_form">
      <div class="form_start">
        <h1>This Form Page for UserEdit Page</h1>
      </div>
    </div>
    <div class="clearfix"> </div>
  </div>
</body>
</html>

在这里，我只想为 .edit_form div 添加背景颜色。但它不起作用。

这是 CSS：

.edit_form {
  margin: auto;
  width: 50%;
  background: red;
}

.form_start {
  position: fixed;
  top: 4em;
  background: rgb(0 0 0 / 0%);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgb(0 0 0 / 60%);
  border-radius: 10px;
}

我添加了屏幕截图以便更好地理解。 Image of problem with inspect

【问题讨论】：

.form_start position:fixed 会导致您的问题。

标签： html css forms background-color

【解决方案1】：

将元素设置为position: fixed 会使其脱离正常流程。

正常流程之外的元素对其容器的大小没有影响。

.edit_form 中的only 元素有position: fixed。

这意味着.edit_form 内部没有影响其高度的元素。

这使它的高度为0。

因为它没有高度，所以它没有显示背景颜色的区域 (any width * 0 = 0 pixels)。

您可以通过多种方式进行更改，包括：

给它一个明确的高度
在其中放入一些内容（按正常流程）
改为在定位元素上设置背景
定位它而不是定位它的子节点

【讨论】：

【解决方案2】：

这是你想要的吗

.edit_form {
  margin: auto;
  width: 50%;
  height: 500px;
  background: red;
  padding: 10px;
  
}
.form_start {
  margin: auto;
  background: rgb(250, 250, 250);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgb(0 0 0 / 60%);
  border-radius: 10px;
  width: 100%;
}

<html>
<head>
    <title>User Edit Form</title>
    <link href="css/style.css" rel='stylesheet' type='text/css' />
</head>
<body class="UserEdit">
    <div class=" container" >
        <div class="edit_form" >
            <div class="form_start" >
                <h1>This Form Page for UserEdit Page</h1>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</body>

.edit_form {
  margin: auto;
  width: 50%;
  height: 500px;
  background: red;
  padding: 10px;
  
}
.form_start {
  margin: auto;
  background: rgb(250, 250, 250);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgb(0 0 0 / 60%);
  border-radius: 10px;
  width: 100%;
}

<html>
<head>
    <title>User Edit Form</title>
    <link href="css/style.css" rel='stylesheet' type='text/css' />
</head>
<body class="UserEdit">
    <div class=" container" >
        <div class="edit_form" >
            <div class="form_start" >
                <h1>This Form Page for UserEdit Page</h1>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</body>

【讨论】：