html - 用伪 :before also darkens text that should remain white 覆盖

Question

我有一个带有背景图片和一些文本的元素。出于各种充分的理由，该元素被定位为 absolute。

我使用伪 :before 向图像添加了一个叠加层。

现在的问题是叠加层也会使元素中的文本变暗。我该如何解决？我希望我的文字保持漂亮的白色!

JSFiddle:https://jsfiddle.net/xvdk95st/

.text {
  position: absolute;
  background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  line-height: 25px;
  color: #fff;
  min-height: 400px;
}

.text::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

<div class="text">
  <p>
    Hi, I'm some text!
  </p>
</div>

Answer 1

使用 z-index与 position在 <p> (因为 z-index 总是与 position 一起使用)，例如:

.text p {
  z-index: 10;
  position: relative;
}

看看下面的片段:

.text {
  position: absolute;
  background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  line-height: 25px;
  color: #fff;
  min-height: 400px;
}

.text::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.text p {
  z-index: 10;
  position: relative;
}

<div class="text">
  <p>
    Hi, I'm some text!
  </p>
</div>

希望这对您有所帮助!