Html 使用pseudo:before覆盖也会使应保持白色的文本变暗

我有一个带有背景图像和一些文本的元素。 出于各种原因，该元素被定位为

绝对

我用一个伪

：before

在图像上添加了一个覆盖

现在的问题是覆盖也会使元素中的文本变暗。 我该如何解决这个问题？我希望我的文字保持白色

JSFiddle：

.text{
位置：绝对位置；
背景图像：url（'https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
背景尺寸：封面；
背景重复：无重复；
宽度：400px；
线高：25px；
颜色：#fff；
最小高度：400px；
}
.文本：：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
背景色：rgba（0,0,0,0.4）；
z指数：2；
}

嗨，我是一些文字！

在
上使用
z-index
和
位置
（因为
z-index
始终与
位置
一起工作），例如：

请看下面的代码片段：


.text{
位置：绝对位置；
背景图像：url（'https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
背景尺寸：封面；
背景重复：无重复；
宽度：400px；
线高：25px；
颜色：#fff；
最小高度：400px；
}
.文本：：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
背景色：rgba（0,0,0,0.4）；
z指数：2；
}
.文本p{
z指数：10；
位置：相对位置；
}


嗨，我是一些文字！

如果只想使背景变暗，可以使用多个背景：


.text{
位置：绝对位置；
背景图像：
线性渐变（向右，rgba（0,0,0,0.4），rgba（0,0,0,0.4）），
url（'https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
背景尺寸：封面；
背景重复：无重复；
宽度：400px；
线高：25px；
颜色：#fff；
最小高度：400px；
}


嗨，我是一些文字！


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