因此，我一直在阅读文章，并创建了以下示例来支持这些问题。

<理>第一个问题是关于课文的位置。例如，如果我们观察代码，文本当前在黑暗覆盖的前面。这是因为我们用过的课。删除它，将导致文本出现在黑暗覆盖后面。我不明白为什么会这样，因为我认为是指在显示实际内容之前（即首先绘制覆盖图，然后绘制内容）。
1. 代码包含一个不希望的效果，即当包含大量文本时。这会导致文本溢出并使页面可滚动，显示空背景，而不是图像本身。如果背景不随它滚动，而只让文本滚动，那就更好了。
2. 有可能实现同样结果的方法吗？

感谢您澄清我对CSS的理解。

顺晟科技：

1. （或）表示在元素的innerHTML之前。与职位上下文无关。示例中的伪元素本身具有绝对定位，默认情况下，这将把它放在静态定位元素的顶部。如果从您的中移除，它将具有，因为这是默认值。

2. 您可以滚动，因为内容div有附加的文本在背景图像之外环绕。您可以添加和添加以防止它超出其容器。

3. 创建一个新的位置上下文并允许Z索引，但不像以前那样从文档流中移除元素。但是，由于您已经定义了高度，所以它的工作方式与*在这个非常特殊的例子中.

   大致相同

body{
  height:100%;
  width:100%;
  margin:0px;
}

h1{
  margin:0;
  padding:0;
}

.wrapper{
  height:100vh;
  background: url('https://wallpaperaccess.com/full/257525.jpg') no-repeat center center / cover;
  background-attachment: fixed;
}

/* dark overlay */
.wrapper::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(33, 33, 33, 0.5);
}

.content{
  position:absolute;
  color:#fff;
  top50%;
  left:0;
  right:0;
  width:50%;
  margin:auto;
  text-align: center;
}