Question

我被困在我的网站开发中...... 我想在我的<article>之后添加一个<header>，其中包含全屏背景介绍，但该部分会叠加在<div>之上，即使它位于标题中，而我的文章也在我的文章中<body>。我看到了Full screen image background on header，但没有解决我的问题......

这是我的代码：

CSS

body{
  margin:0;
}
.intro{
  height: 100%;
  width: 100%;
  /*background-size: cover;*/

}
.text-intro{
  padding-top: 10%;
  padding-left: 5%;
}
.bg{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;

}
h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  color: white;
  margin-top: 0;
  margin-bottom: 0;
}
article h2{
  color: white;
}
header h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: white;
  opacity: 0.3;
  margin-top: 7px;
  margin-bottom: 7px;
}
.btn-intro a{
  display: block;
  font-size: 35px;
  margin-top: 45px;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: #FFEA00;
  border: solid #FFEA00 2px;
  width: 379px;
  padding: 21px;
  -o-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;

}
.btn-intro a:hover{
  display: block;
  font-size: 35px;
  margin-top: 45px;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: black;
  background-color: #FFEA00;
  border: solid #FFEA00 2px;
  width: 379px;
  padding: 21px;
  -o-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}
.social img{
  width: 25px;
  height: 25px;
  padding-right: 5px;
}
article{
  position: relative;
}

HTML

<body>
  <header>
    <div class="intro">
      <img class="bg" src="images/bg-intro.png">
      <div class="text-intro">
        <div class="social">
          <a href="https://www.facebook.com/WarexStudio"><img src="images/facebook.svg" alt="Facebook"></a>
          <a href="https://www.twitter.com/KoenigTheo"><img src="images/twitter.svg" alt="Twitter"></a>
        </div>
        <h2>Portraits des membres du groupe A1</h2>
        <h1>Theo Koenig</h1>
        <h2>MMi Montbéliard</h2>
        <div class="btn-intro">
          <a href="">VOIR LES PORTRAITS</a>
        </div>
      </div>
    </div>
  </header>
  <article>
    <h2>Groupe de TP A1</h2>
  </article>
</body>

Answer 1

试试这个。

    .text-intro{
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    }

之后尝试使用“top”和“left”值来获取你想要的位置，而不是你之前声明中的填充。

我的<article>掌握了我的介绍背景

1 个答案: