Question

我似乎无法改变我在HTML中的div的背景颜色，这是我到目前为止所拥有的：

<div class="footer">
  <div class="left-footer">
  </div>
  <div class="center-footer">
  </div>
  <div class="right-footer">
  </div>
</div>

.footer {
  color: #FF0000;
  width: 100%;
}

Answer 1

你可能会这样：

.footer {
    color: #FF0000;
    width: 100%;
    background-color: blue;
}

你还需要实际div中的一些内容来查看背景颜色，或者设置高度/填充

Answer 2

您应该使用background（速记）或background-color来更改背景颜色。

这样的事情会：

.footer {
    background-color: #fff;
}

你还需要在div中添加一些内容以赋予它高度，或者在CSS中为div中的div声明如下：

.footer {
    background-color: #fff;
    width: 100%;
    height: 30px;
}

Answer 3

您可能需要背景颜色，而不是颜色。颜色通常用于字体颜色

Answer 4

您需要使用

的CSS属性

background-color

这会为所选元素的背景添加颜色

您使用的属性（color）将颜色添加到所选元素的前景，即它代表文本的颜色

.footer {
  background-color: red;
  width: 100%;
  height: 30px;    /*Added just for demonstration purpose*/
}

<div class="footer">
  <div class="left-footer">
  </div>
  <div class="center-footer">
  </div>
  <div class="right-footer">
  </div>
</div>

Answer 5

color属性会更改文本颜色。您需要设置background-color属性。但是，除非你给div一些高度，否则你将无法看到它！

<div class="footer">
  <div class="left-footer">
  </div>
  <div class="center-footer">
  </div>
  <div class="right-footer">
  </div>
</div>

.footer {
  background-color: #FF0000;
  width: 100%;
  height: 50px;
}

Answer 6

根据您的CSS使用不正确的属性来设置背景颜色，请使用background-color而不是color。 color用于设置文字的颜色。

注意根据对答案的一些评论，您似乎已在样本标记上测试了background-color，该样本标记没有内容，因此DIV没有高度，您将看不到背景颜色。请将内容添加到DIV或为其指定高度，以便{。}}}正常工作。

background-color

另一种可能性（基于看不见的代码和假定的代码）是.footer { background-color: red; }的子DIV全部浮动，导致.footer DIV折叠并隐藏背景颜色。要解决此问题，您需要将clearfix应用于.footer DIV。

Answer 7

你必须使用背景色。颜色用于文字

.footer {
       background-color: the color you want;
}

如何更改元素的背景颜色？

7 个答案: