Css 在相对定位的文本后面定位不透明的伪内容

我试图在一些文本后面放置一个不透明的黑色背景，但遇到了问题，因为文本总是在不透明的颜色后面。我不能使用z-index，因为文本是相对定位的，有人知道我如何使文本显示在不透明的背景上吗

JS小提琴

HTML

<section class="primary" style="background-image: url('http://lorempixel.com/output/fashion-q-c-640-480-9.jpg');" data-bgimg="http://lorempixel.com/output/fashion-q-c-640-480-9.jpg">
    <div class="item">
        <article>
            <div class="entry">
                <p>A whole bunch of text that goes on top of everything but is relatively positioned</p>
            </div>
            <div class="clear">&nbsp;</div>
        </article>
    </div> <!-- End div.item -->
    <p class="scroll-down">Scroll down</p>
</section>

---

我想我不理解你的问题，但它仍然值得一试

---

我想我不理解你的问题，但它仍然值得一试

---

当时我在想，我不能在相对定位的块元素上使用z索引！谢谢你，解决了这个问题。当时我在想我不能在相对定位的块元素上使用z-index！谢谢你，解决了这个问题。

section {
    position:relative; text-align: center;
    background-repeat: no-repeat; background-size: cover;
    min-height:100%; color:#fff;
}
.item:after {
    content: ''; position:absolute; width:100%; height:100%; top:0; left:0;
    background-color:#000; opacity:0.3;
}

section {
    position:relative; text-align: center;
    background-repeat: no-repeat; background-size: cover;
    min-height:100%; color:#fff;z-index: -9999;
}

.item:after {
    content: ''; position:absolute; width:100%; height:100%; top:0; left:0;
    background-color:#000; opacity:0.3; z-index: -9999;
}