应用全宽后内容未显示：在其下方的元素上伪之前

Question

我已经构建了一个我在 CodePen 中遇到的问题的示例，其中我有一些文本，我试图使其在其所在的背景下更易于阅读；背景图像正在使用background-image 设置，因此您不能直接对其应用不透明度（AFAIK），所以我尝试在其上放置全宽背景颜色并设置不透明度以使背景变暗 - 但是这有导致其上的内容消失。

CodePen： http://codepen.io/gutterboy/pen/GqGgmG （禁用.bg:before 以查看内容）

HTML：

<div class="bg">
  <div class="container">
    <ul class="left">
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
    <ul class="right">
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
  </div>
</div>

CSS：

.bg {
    width: 100%;
    background: #20334c url("some_image.jpg") center center no-repeat;
  background-size: cover;
  height: 550px;
  overflow: hidden;
  position: relative;
}

.bg:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

ul {
  position: absolute;
  top: 75px;
  font-size: 2em;
  font-weight: bold;
  z-index: 9999;
  color: #fff;
}

ul.left {
  left: 50px;
}

ul.right {
  right: 50px;
}

为什么要将伪 :before 元素应用于 .bg 类隐藏其顶部的内容？

Answer 1

:before 元素将其余文本向下推，因为它已被分配为 display: block。您需要通过将position 设置为absolute 将:before 排除在外。这将允许文本和:before 能够重叠。

.bg {
    width: 100%;
    background: #20334c url("https://helpx.adobe.com/content/dam/help/en/photoshop/how-to/remove-subject_1408x792.jpg") center center no-repeat;
  background-size: cover;
  height: 550px;
  overflow: hidden;
  position: relative;
}

.bg:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.8);
}

.container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

ul {
  position: absolute;
  top: 75px;
  font-size: 2em;
  font-weight: bold;
  z-index: 9999;
  color: #fff;
}

ul.left {
  left: 50px;
}

ul.right {
  right: 50px;
}

<div class="bg">
  <div class="container">
    <ul class="left">
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
    <ul class="right">
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
  </div>
</div>

Answer 2

改成之后

.bg {
    width: 100%;
    background: #20334c url("https://helpx.adobe.com/content/dam/help/en/photoshop/how-to/remove-subject_1408x792.jpg") center center no-repeat;
  background-size: cover;
  height: 550px;
  overflow: hidden;
  position: relative;
}

.bg:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

ul {
  position: absolute;
  top: 75px;
  font-size: 2em;
  font-weight: bold;
  z-index: 9999;
  color: #fff;
}

ul.left {
  left: 50px;
}

ul.right {
  right: 50px;
}

<div class="bg">
  <div class="container">
    <ul class="left">
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
    <ul class="right">
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
  </div>
</div>

`