Question

我正在为div中的文本获取黑色背景。我不知道为什么。 div的代码和样式是。

<div class="intro_div">
            <div>Intro text goes here</div>
</div>

div的风格是

.intro_div{
  color: #fff;
  font-size: xx-large;
  text-align: center;
  height: 500px;
  vertical-align: middle;
  line-height: 500px;
}

输出是

Answer 1

你需要使用背景颜色，而不是颜色：

.intro_div{
  background-color: #fff;
  color:black;
  font-size: xx-large;
  text-align: center;
  height: 500px;
  vertical-align: middle;
  line-height: 500px;
}

另外，尝试在CSS中使用已知名称，这样它就会更容易阅读。而不是

background-color: #fff;

尝试使用

background-color: white;

Answer 2

您可以使用Google Chrome或Mozilla Firefox调试工具查看div是否继承其他css规则吗？

它可能没有intro_div的css规则，而是有div类的规则。

在Mozilla上，您可以右键单击文本，查看元素，并分析调试器窗口右下角的css规则。

由于您正在使用Chrome，请浏览窗口右侧“样式”标签中的所有规则。可能是您的其他样式表之一导致此情况（例如，材料设计样式表）。在明确将其设置为白色之前，最好先确定将其设置为黑色的内容。默认情况下应该取消设置。

Answer 3

我注意到你有错误的CSS background-color属性。它应该是

background-color:

不 color：

https://jsfiddle.net/fergnab/16bobgmu/1/

Answer 4

此代码中没有黑色bg。它必须来自其他地方，即父元素。选择包含intro类的div并检查右侧到底部的所有样式，查找任何样式的background-color属性。

Answer 5

你应该采用白色背景颜色和黑色作为这样的颜色：

<html>
<head>
    <style type="text/css">

    .intro_div{
      background-color: #fff;
      color:black;
      font-size: xx-large;
      text-align: center;
      height: 500px;
      vertical-align: middle;
      line-height: 500px;
}
    </style>
</head>
<body>
<div class="intro_div">
            <div>Intro text goes here</div>
</div>
</body>
</html>

文本的黑色背景

5 个答案: