文字位置在图片下方答案

【问题标题】：Text position is under Picture文字位置在图片下方
【发布时间】：2022-11-21 19:59:31
【问题描述】：

我有一个 css 样式问题：

我创建了一个标题，里面有文字。标头有两个伪元素：::before 和::after。这两个元素都位于标题元素之上。我如何让 h1 保持在所有内容的前面？

这是我的代码示例：（删除了代码 sn-ps？？我没有找到要添加的按钮）

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  background-image: url("Bild1.svg");
  background-size: 100% 100%;
  text-align: center;
  padding: 1px 20px;
}

header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("Bild2.svg");
  background-size: 100% 100%;
  opacity: .5;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -10px;
  background-image: url("Bild3.svg");
  background-size: 100% 100%;
  opacity: .5;
}

<header>
  <h1>Title Text</h1>
</header>

这是一张图片：

如您所见，文本位于两个元素的后面。

我尝试使用 z-index 修复它，但对我没有任何帮助。你有想法吗？

【问题讨论】：

您可以尝试在您的 CSS 中添加这一行吗？ h1 { z-index: 100 }

标签： css

【解决方案1】：

在背景上应用 z-index 99 并在文本上应用 z-index 999 我希望它能起作用

【讨论】：

【解决方案2】：

您可以尝试在您的 CSS 中添加这一行吗？

h1 { 
 z-index: 100
}

【讨论】：