Question

现在我无法在背景图片后面放置一个段落。我尝试过使用z-index和position relative，但没有找到任何成功。我怎么能这样做？

＆＃13;

.pageone {
  background-image: url(headerhalf.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
}

#aboutme {
  text-align: center;
  font-size: 5vw;
  margin-top: 6vh;
    color: #81af66;
  text-shadow: 2px 2px 3px rgba(129, 131, 131, 0.25);
}

.pagecontainer {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;

}

#aboutcopy {
  font-size: 1.25vw;
  margin: 1.5em;
}

＆＃13;

<div class="pageone">
  <div class="pagecontainer">
    <div class="aboutreal">
      <p id="aboutme">About Me</p>
      <p id="aboutcopy">I run a YouTube channel on which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, logos, and more. I am comfortable with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere Pro and, Unreal Engine 4. I am also learning HTML and CSS.</p>
    </div>
  </div>
</div>

＆＃13;

以下是该网站的链接：site

谢谢！

Answer 1

尝试使用CSS :after选择器：

.pageone {
  background-image: url(headerhalf.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  position:relative;   
}

.pageone:after {
  content:"Your text here";
  position: absolute;
  top:20px;
  right:20px;
}

Answer 2

问题在于您尝试将一个元素置于其父元素后面，这在常规页面流中是不可能的。一个选项是在about元素的同一级别创建另一个<div>并将图像放在那里：

＆＃13;

.pageone {
  /* moved to #headerhalf */
  /*background-image: url(headerhalf.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;*/
  width: 100vw;
  height: 100vh;
  position: relative; /*needed because of absolute positioning of #headerhalf */
}

#headerhalf {
  /*background-image: url(headerhalf.png);*/
  /* simulating semi-transparent PNG for the sample snippet*/
  opacity: 0.9;
  background-color: ForestGreen;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute; /*removed element from normal flow to make it full size*/
  z-index: 1;
}

.pagecontainer {
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

#aboutme {
  text-align: center;
  font-size: 5vw;
  margin-top: 6vh;
    color: #81af66;
  text-shadow: 2px 2px 3px rgba(129, 131, 131, 0.25);
}

#aboutcopy {
  font-size: 1.25vw;
  margin: 1.5em;
}

＆＃13;

<div class="pageone">
  <div class="pagecontainer">
    <div id="headerhalf"></div>
    <div class="aboutreal">
      <p id="aboutme">About Me</p>
      <p id="aboutcopy">I run a YouTube channel on which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, logos, and more. I am comfortable with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere Pro and, Unreal Engine 4. I am also learning HTML and CSS.</p>
    </div>
  </div>
</div>

＆＃13;

我认为可以在不使用绝对定位的情况下实现这一点，但这种方法非常简单。

在背景图像后面放置文本

2 个答案: