Html 我怎样才能把文字放在前面，而把图像留在背景上？

这是我阅读并解决stackoverflow社区问题后的第一个问题

我想把我的标题和副标题放在前面。我试过使用z-index，但仍然不起作用。谢谢你的帮助

代码如下：

.container{
填充：0；
最大宽度：1500px；
保证金：0自动；
}
.头衔{
高度：65vh；
背景图片：url（“images/alvoradaBetoBarataPR7maio2017.jpeg”）；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
显示器：flex；
弯曲方向：立柱；
证明内容：顶部；
}
.灰度{
滤镜：灰度（95%）；
}
.模糊{
过滤器：模糊（3px）；
}
.grayscale.blur{
滤镜：模糊（3px）灰度（95%）；
z指数：5；
}
.标题h1，
.标题h2{
z指数：666；
颜色：黑色；
文本对齐：居中；
边缘顶部：5px；
}
.标题h1{
字号：85px；
字号：700；
字体系列：“Signika”，Helvetica，无衬线；
}
.标题h2{
字体大小：35px；
字体大小：400；
字体系列：“Lato”，Helvetica，无衬线；
}
.标题img{
对象匹配：覆盖；
z指数：-666；
}

阿尔托埃斯卡卢酒店
这是一个很好的计划

Webkit模糊适用于容器中的所有内容，唯一的解决方法是将带有模糊的图像放置在文本下方的绝对位置容器中。看这支笔：

PS:justify content:top无效

HTML

<section class="container">
    <div class="title grayscale blur" alt="Foto: Beto Barata/Presidência da República - 7.maio.2017">
    </div>
<div class="content">
        <h1>alto escalão</h1>
        <h2>os poderosos indicados pelo Palácio do Planalto</h2>
</div>
</section>

---

Z索引仅应用同一级别的标记。 像这样的东西不起作用（因为文本在容器中）：

容器{
z指数：-1；
}
正文{
z指数：1；
}

好吧，像这样的工作：

<container>
</container>
<text>
</text>

container {
    position: absolute;
    z-index: -1;
}
text {
    position: absolute;
    z-index: 1;
}

容器{
位置：绝对位置；
z指数：-1；
}
正文{
位置：绝对位置；
z指数：1；
}

---

因为两个标记处于同一级别。

在该代码中，文本位于前面。

<container>
    <text>
    </text>
</container>

container {
    z-index: -1;
}
text {
    z-index: 1;
}

<container>
</container>
<text>
</text>

container {
    position: absolute;
    z-index: -1;
}
text {
    position: absolute;
    z-index: 1;
}