在其下方的元素上应用全宽 :before pseudo 后内容未显示

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 class 隐藏其上的内容？

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>

`

在其下方的元素上应用全宽 :before pseudo 后内容未显示

Content not showing after applying a full width :before pseudo on an element below it

html

css

pseudo-element