Question

body{
  padding: 0;
  margin: 0;
  background-color: #c9ffd6;
}
.wrapper{
  height: 100vh;
  width: 93%;
  background-color: #a4f4b8;
  margin: 0 auto;
  padding: 0;
}

 <!DOCTYPE html>
 <html>
 <head>
   <title>Felpix | Home</title>
   <meta charset="utf-8">
   <link type="text/css" rel="stylesheet" href="style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Welcome to Felpix Studios, a brand new tech startup making simple, yet helpful apps!">
   <meta name="keywords" content="Felpix, iOS, Android, apps, games, code">
   <meta name="author" content="Felpix">
   <!--Libraries-->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
 </head>
  <body>
    <div class="w3-animate-zoom wrapper"> <!--Page and Animation-->
      <header>
        <div>
          <h1>Felpix Studios</h1>
          <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
          </nav>
        </div> <!--Header-->
      </header>
    </div> <!--End of Page-->
 </body>
 </html>

所以我添加了bootstrap标签，以便我可以在我的网站上使用它。除此之外，我也有w3css库。当我打开我的网站时，身体的颜色从浅绿色变为白色......有什么方法可以解决这个问题吗？

Answer 1

您的wrapper课程的高度为100vh，因此会占据整个屏幕。只需在包装类中取出background-color：

body{
  padding: 0;
  margin: 0;
  background-color: #c9ffd6;
}
.wrapper{
  height: 100vh;
  width: 93%;
  margin: 0 auto;
  padding: 0;
}

或者将其更改为与body相同的颜色：

body{
  padding: 0;
  margin: 0;
  background-color: #c9ffd6;
}
.wrapper{
  height: 100vh;
  width: 93%;
  background-color: #c9ffd6;
  margin: 0 auto;
  padding: 0;
}

您还可以指定正文的背景为!important，以使其更具有.wrapper的特异性：

body{
  padding: 0;
  margin: 0;
  background-color: #c9ffd6 !important;
}

第四个选项是在正文上设置一个大于0的z-index，以便它显示在包装器的“前面”：

body{
  padding: 0;
  margin: 0;
  background-color: #c9ffd6;
  z-index: 1;
}

希望这有帮助！

Bootstrap去除体色？

1 个答案: