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。您需要将:before设置为position，才能将absolute移出流程。这将允许文本和: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>

`

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

2 个答案: