如何在CSS中隔离页面和div背景颜色？

Question

我正在创建一个登录表单，但我无法按照我想要的方式使用BG颜色。

我希望页面的背景颜色为蓝绿色（#00CEB9）。我创建了一个具有不同背景的表单（让我们只说红色用于演示），但是青色仍然显示在框内。

我希望这个盒子有100％的红色背景（同时在页面的其余部分保留青色背景）：

<div class="login-container">
  <form>
    <label for="login">Login</label>
    <input type="text" id="login">
    <label for="password">Password</label>
    <input type="text" id="password">
  </form>
</div>

CSS

html *{
  background-color: #00CEB9;
}

.login-container {
    margin: 8px auto;
    border: 3px solid #f1f1f1;
    padding: 8px;
    border-radius: 4px;
    width: 30%;
    text-align: center;
    background-color: red;
}

如何保留页面背景颜色并使用具有自己背景颜色的表单框而不会相互污染？

Answer 1

尝试更改CSS：

html *{
  background-color: #00CEB9;
}

到

html, body {
  background-color: #00CEB9;
}

通过将其应用于html *，您将其应用于所有未分配背景颜色的元素。

有关如何深入了解CSS选择器的详细信息，请参阅CSS Selectors Reference。

Answer 2

html *表示html元素中的每个元素，这并不完全是您正在寻找的。

您可以使用

html,  body {
    background-color: #00CEB9;
} 

相反

Answer 3

从css中的第一行代码中删除*。 *正在做的是它使所有东西的背景颜色＃00CEB9。这就是为什么您正在查看表单和每个文本框的背景颜色为＃00CEB9。我希望这有帮助

Answer 4

问题在于您的css文件。您基本上是将背景颜色：teal分配给所有html元素，因为*。

将css更改为：

html {
  background-color: #00CEB9;
}