背景应用于：css 的元素之前没有应用于整个 div [重复]

Question

这个问题在这里已经有了答案：

• Position 绝对但相对于父母4 个答案

使用:before 伪元素应用于 div 的背景不适用于整个 div。 这是 html & css 代码。

HTML

<section id="pages">
 <div class="container">
  ...
  ...
  ....
 </div
</section>

CSS

#pages {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../img/background.png);
  background-size: 100% 100%;
  padding: 80px 0 0 0;
  min-height: 100vh;
}
#pages:after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

表单位于容器 div 内，页面部分一直延伸到页面末尾。 我已经上传了网页的图片。 点击这里查看图片

Answer 1

您需要添加position: relative对于#pages div。 所以:after伪元素相对于它是绝对定位的。

 #pages { display: flex; align-items: center; justify-content: center; background: url(../img/background.png); background-size: 100% 100%; padding: 80px 0 0 0; min-height: 100vh; position: relative; } #pages:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .5); height: 100%; }

 <section id="pages"> <div class="container">... ... .... </div> </section>