html - 背景颜色不会显示

标签 html css twitter-bootstrap

我不确定为什么 background-color 标签没有应用到我的 body 元素。我唯一想不到的是我用别的东西掩盖了它，但我似乎无法弄清楚哪里出了问题。无论哪种方式，我只是想将背景颜色更改为灰色。我仍在学习，这只是我在 freecodecamp 上的第二个元素。

body{
  background-color: grey;
  padding-top: 70px;
}
header{
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
  box-shadow: 0px 0px 10px 3px #555
}
#headerText{
  color: white;
  text-align: right;
}
#headerText2{
  color: white;
  text-align: center;
}
#headerImg{
  padding: 20px 30px 0px 0px;
}
#headerImg img{
  width: 100%;
  height: 100%;
}
hr {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #aaa;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}
.vertical-align {
    display: flex;
    align-items: center;
}
#section2{
  background-color:white;
  height: 400px;
  box-shadow: 0px 0px 10px 3px #555
}
#section3{
  background-color:white;
  height: 400px;
  box-shadow: 0px 0px 10px 3px #555
}

#top-bar-img{
  height: 80px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
}
#top-bar{
  background-color: purple;
  box-shadow: 0 0 10px 3px #555;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
  <nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
      </div>
      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-xs-1"></div>
      <div class="col-xs-10">
        <header id="section1">
          <div class="row vertical-align">
            <div class="col-xs-1"></div>
            <div class="col-xs-8" id="center">
              <h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
              <hr></hr>
              <h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
            </div>
            <div id="headerImg" class="col-xs-3">
              <img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
            </div>
          </div>
        </header>
        <div id="section2">
          gfgf
        </div>
        <div id="section3">
          gfgf
        </div>
      </div>
    </div>
  </div>
</body>

最佳答案

您正在使用 Bootstrap，它们的 CSS 规则覆盖了您的规则。使您的规则更具体:

html > body{
  background-color: grey;
  padding-top: 70px;
}


html > body{
  background-color: grey;
  padding-top: 70px;
}
header{
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
  box-shadow: 0px 0px 10px 3px #555
}
#headerText{
  color: white;
  text-align: right;
}
#headerText2{
  color: white;
  text-align: center;
}
#headerImg{
  padding: 20px 30px 0px 0px;
}
#headerImg img{
  width: 100%;
  height: 100%;
}
hr {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #aaa;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}
.vertical-align {
    display: flex;
    align-items: center;
}
#section2{
  background-color:white;
  height: 400px;
  box-shadow: 0px 0px 10px 3px #555
}
#section3{
  background-color:white;
  height: 400px;
  box-shadow: 0px 0px 10px 3px #555
}

#top-bar-img{
  height: 80px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
}
#top-bar{
  background-color: purple;
  box-shadow: 0 0 10px 3px #555;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
  <nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
      </div>
      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-xs-1"></div>
      <div class="col-xs-10">
        <header id="section1">
          <div class="row vertical-align">
            <div class="col-xs-1"></div>
            <div class="col-xs-8" id="center">
              <h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
              <hr></hr>
              <h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
            </div>
            <div id="headerImg" class="col-xs-3">
              <img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
            </div>
          </div>
        </header>
        <div id="section2">
          gfgf
        </div>
        <div id="section3">
          gfgf
        </div>
      </div>
    </div>
  </div>
</body>

在 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 了解更多关于 CSS 特异性的信息

注意:您还应该不惜一切代价避免 !important。

关于html - 背景颜色不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40733034/

上一篇：php - 如何每隔一分钟将当前值加2？

下一篇：html - 可能有倾斜堆叠的 div 和一个有背景图像的 div 吗？

相关文章：

javascript - 意外的 Java 脚本错误

css垂直表单步骤指示器？

css - selenium:如何检查某些文本是否为粗体

javascript - 如何显示通过 div 中的 html 输入选择的照片？

html - SB Admin 2 Navbar 在删除一些内容后不再折叠

重置后，jQuery attr() 在 Bootstrap 按钮上不起作用

javascript - 制作 Bootstrap 弹出窗口模式？

html - 当鼠标悬停在 "fa icon"上时如何改变它的颜色？

javascript - 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录？

javascript - 如何根据与变量匹配的数据属性选择div？

©2024 IT工具网  联系我们