overlay with pseudo :before also darkens text that should remain white - html

Question

I have an element with a background image and some text in it.
For various good reasons the element is positioned absolute.
I added an overlay to the image with a pseudo :before.
The problem now is that the overlay also darkens the text in the element.
How would I fix that? I want my text to remain nicely white!
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

Use z-index with position on <p> (because z-index always works with position), like:
.text p {
z-index: 10;
position: relative;
}
Have a look at the snippet below:
.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>
Hope this helps!

Answer 2

If you want to darken background only, you can use multiple backgrounds:
.text {
position: absolute;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>