Question

我不确定如何在当前背景图片下方添加网格并继续添加信息。当我现在尝试添加网格时，它只会在导航栏下方创建一个网格而不是当前背景下方。

/**********BODY GENERAL**********/

body {
  margin: 0;
}


/* Fix this one day */

.bg-img {
  background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

strong {
  font-weight: bold;
}


/*********NAVIGATION*********/

nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1em;
  grid-auto-rows: auto;
  text-align: center;
  align-items: center;
  background: /*rgba(255, 51, 0, .95);
	*/
  z-index: 10;
}

@media screen and (max-width: 900px) {
  nav {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-gap: 1em;
  }
}

.menu1 {
  grid-column: 1;
}

.menu2 {
  grid-column: 2;
}

.logo {
  grid-column: 3;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  font-size: 28px;
  width: 500px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 7vh;
  margin-bottom: 25px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.menu3 {
  grid-column: 4;
}

.menu4 {
  grid-column: 5;
}


/**************HOVER ANIMATION**************/

div>a {
  font-family: 'Raleway';
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
  font-size: 0.8rem;
}

div>a:hover {
  color: #000;
}

div>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

div>a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/**********MAIN HEADER***********/

header {
  color: white;
  justify-content: center;
  align-content: center;
  top: 0;
  bottom: 0;
  left: 0;
}


/**********BODY*****************/

.Minfo {
  color: red;
  width: 100%;
  padding-top: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
}

.subtitle {
  padding-left: 4em;
  padding-top: 29em;
  font-size: 100%;
  color: #fff;
}

.title {
  font-size: 3em;
  text-align: left;
  color: #FFF;
  padding-bottom: 0px;
}

.subtext {
  padding-top: 0px;
  color: #FFF;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Centennial It's Academic</title>
  <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>

<body>
  <div class="bg-img">
    <header>
      <nav class="container">
        <div class="menu1">
          <a class="navLinks" href="#home">Home</a>
        </div>
        <div class="menu2">
          <a class="navLinks" href="#upcoming">Tournaments</a>
        </div>
        <div class="logo">
          <p>It's Academic</p>
        </div>
        <div class="menu3">
          <a class="navLinks" href="#history">History</a>
        </div>
        <div class="menu4">
          <a class="navLinks" href="#faq">Contact Info</a>
        </div>
      </nav>
      <!-- This cluster  of info -->
      <div class="Minfo">
        <div class="subtitle">CENTENNIAL
          <br>
          <div class="title"> It's Academic</div>
          <br>
          <div class="subtext">Meets every Tuesday in Room 506</div>
        </div>
      </div>

    </header>
    <!--Don't even -->

  </div>

</body>

</html>

open a ticket（请以整页模式打开）：

我希望它看起来的一个示例就像在codepen网站上一样，所有信息都在该背景下。

Answer 1

我不确定你的意思。我脑子里有两种选择：

按下图像下方的网格。在这种情况下，只需从header移动.bg-img标记，然后将其放入。
https://codepen.io/moshfeu/pen/ERWVdZ
您想要fixed效果（就像您附加的网站一样）。在这种情况下，您需要在标题上使用position: fixed https://codepen.io/moshfeu/pen/aKJvXW

该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。它相对于视口建立的初始包含块定位

  https://developer.mozilla.org/en-US/docs/Web/CSS/position

在当前背景下创建网格

1 个答案: