将文本放在背景图像后面答案

【问题标题】：Place text behind background image将文本放在背景图像后面
【发布时间】：2018-02-18 12:26:49
【问题描述】：

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

.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;
}

<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>

这是该网站的链接：site

谢谢！

【问题讨论】：

标签： html css layout position

【解决方案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;
}

【讨论】：

什么是 CSS 说服力？
CSS 伪就像你可以像上面的代码一样将相对元素添加到你的 html 元素：之后，你可以阅读更多关于 CSS 伪的内容：w3schools.com/css/css_pseudo_elements.asp
你确定它叫那个吗？该页面中没有提到“说服”这个词。你的意思是“伪元素”吗？
是的，很抱歉：我的意思是您可以在 content 属性中添加文本并将其 z-index 设置为图像后面
没问题:) :)

【解决方案2】：

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

.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;
}

<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>

我认为不使用绝对定位也可以做到这一点，但是这种方法非常简单。

【讨论】：