Question

我无法将颜色显示在chrome中。我已经尝试在<link>中切换文件的顺序，以防万一出现问题。我没有看到为什么颜色会以铬色显示出来的原因。

＆＃13;

.header {
  background-color: white;
}

.body {
  background-color: blue;
}

＆＃13;

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="headertext">
          <h1> ROBIN HOBB </h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="facebookbuttons"></div>
        <div class="fantasy_text"></div>
      </div>
    </div>
  </div>
</div>
<div class="body">
  <div class="container"></div>
</div>

＆＃13;

Answer 1

您的.body班级DIV没有任何内容。如果你在其中放入一些文字，你会看到蓝色背景：

（并且由于浏览器窗口背景默认为白色，因此您不会在.header DIV上看到白色背景...）

.header {
  background-color: white;
}

.body {
  background-color: blue;
}

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="headertext">
          <h1> ROBIN HOBB </h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="facebookbuttons"></div>
        <div class="fantasy_text"></div>
      </div>
    </div>
  </div>
</div>
<div class="body">
  <div class="container">Here is some content</div>
</div>

Answer 2

＆＃13;

.header {
  background-color: white;
}

body {
  background-color: blue;
}

＆＃13;

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="headertext">
          <h1> ROBIN HOBB </h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="facebookbuttons"></div>
        <div class="fantasy_text"></div>
      </div>
    </div>
  </div>
</div>
<div class="body">
  <div class="container"></div>
</div>

＆＃13;

我假设您正在尝试更改整个页面背景颜色，需要使用正文{...} 选择器而不是 .body {...} 如本样本。

但是，如果目标是使用一个正文类来定位你的CSS是正确的，但内容中没有内容，所以默认情况下它的高度为0。添加约翰内斯提到的内容，它应该适合你。

背景颜色没有出现

2 个答案: