如何更改元素的背景颜色？ [关闭]答案

【问题标题】：How do I change my element's background color? [closed]如何更改元素的背景颜色？ [关闭]
【发布时间】：2015-10-13 22:55:59
【问题描述】：

我似乎无法更改我在 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%;
}

【问题讨论】：

color 是文本颜色。你想要background-color吗？ jsfiddle.net/j08691/az3yLf75
是的，但我已经尝试过背景颜色，但它仍然不起作用
您的页脚是否有内容或高度？看看我的小提琴。
由于您的代表如此之低，我不想投反对票，但您似乎问了很多简单的问题，以寻找所有编码问题的答案。在提出新问题之前，请先尝试做更多研究。
这真的是您拥有的所有 HTML 和 CSS 吗？您的 div 中没有任何类型的内容或文本？

标签： html css

【解决方案1】：

你可能会追求这样的东西：

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

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

【讨论】：

【解决方案2】：

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

这样的事情会：

.footer {
    background-color: #fff;
}

您还需要在 div 中添加一些内容以赋予其高度，或者在 CSS 中为 div 声明高度，如下所示：

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

【讨论】：

对不起，这是在我提交我的之后出现的，它们非常相似......
嗯……看来大家都决定马上回答了。
我尝试过使用背景色，但它不起作用
@Andeb-autos 确保 .footer 的子 DIV 不为空。如果所有的 DIV 都是空的，它们就没有高度。
你能把你的完整代码贴出来让我们看看吗？

【解决方案3】：

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

【讨论】：

我已经尝试使用背景颜色，但它仍然不起作用
你试过在 div 里放点东西吗？例如jsfiddle.net/85oxug8f
如果 div 中没有任何内容并且没有声明高度，您将看不到任何内容。
我的 div 里有东西
@Andeb-autos 你是在暗示.footer 已满吗？我是根据您在问题中提供的标记来问这个的。如果是这样，那么不，.footer 未满。它可能包含 DIV，但这些 DIV 没有高度，因此 .footer 没有高度。

【解决方案4】：

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

【讨论】：

【解决方案5】：

您需要使用

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

【讨论】：

我试过了，还是不行
运行代码sn -p

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

注意根据一些 cmets 的回答，您似乎在示例标记上测试了 background-color，它没有内容，因此 DIV 将没有高度，您将看不到背景颜色。请向 DIV 添加内容或给它们指定高度，以便您可以看到 background-color 工作。

.footer {
    background-color: red;
}

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

【讨论】：