Question

我正在尝试通过使用Grid重新创建此模板。我无法想象如何在我已经创建的背后创建背景图像在我的标记中。想象一下refrence image之后的所有提示？

检查我的website，我已经做了什么，我认为使用z-indexing，但它没有用..如果我将它应用到身体，它将延伸后添加其他内容标题部分。

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif, arial;
}

a{
  color: black;
}

body{
background-color: red;
margin: 0 auto;
width: 80%;
}

/* .background-image{
  background-image: url(../img/bgheader.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  grid-column: 1 / -1;
  grid-row: 1 / 4;
} */

#grid-container{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-gap: 1rem;
}

header{
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 11fr;
  grid-template-rows: 1fr 10fr 1fr 4fr;
  margin-top: 5rem;
}

header ul{
  display: flex;
  justify-content: flex-end;
}

header ul li:nth-child(-n+3){
  margin-right: 3rem;
}

header ul a{
  text-transform: uppercase;
  font-weight: 400;
  color: white;
}

header a:hover{
color: grey;
}

.slogan{
 grid-row: 2 / 3;
 grid-column: 1 / 3;
 justify-self: center;
 align-self: center;
 text-align: center;
}

.slogan h1{
  font-size: 2.5rem;
  color: white;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.more{
  color: white;
}

.services{
  color: #4a4747;
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  justify-self: center;
  align-self: center;
  text-align: center;
  padding: 0 20rem;
}

.services h2{
  margin-bottom: 1rem;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Brackets Junior</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>

  <div id="grid-container">

    <!-- Header Section -->
      <header>
        <a href="#"><img class="logo" src="img/logo.png" alt="logo"></a>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </nav>

        <div class="slogan">
        <h1>Always a step ahead go pro</h1>
        <a href="#" class="more">Learn more..</a>
        </div>

        <div class="services">
          <h2> We provide the best services</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia voluptatum blanditiis expedita ducimus fugit rem, qui repellat, quos totam ipsa reprehenderit eum laboriosam maiores. Eum fugit provident error velit soluta, praesentium enim dolorum architecto, quis quisquam magnam! Sequi voluptas consequatur dolor asperiores rem eaque voluptatem necessitatibus laborum alias, omnis atque.</p>
        </div>
      </header>



    </div>

</body>

</html>

Answer 1

只需将背景应用于标题。

header{
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 11fr;
  grid-template-rows: 1fr 10fr 1fr 4fr;
  margin-top: 5rem;
  background-image: url(../img/bgheader.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

我不确定为什么您的标题包含您的页面内容，也不知道为什么要将标题网格放在页面网格中。这些事情可能会被重新审视。

Answer 2

在页眉或li组件中写入一些文本，然后应用最小填充400px 或200px的顶部和底部填充。这样可以解决您的问题

背景 - 带有CSS网格的标题部分后面的图像

2 个答案: