Html 如何模糊文本后面的背景

有人能帮我找到在这里做的错误吗？我试图将文本置于背景之上，但如果我使用z索引：-1；它会消失或只是回到后面，看不见它。而且也不介意说是否有更好的方法来改革所有的代码

html，正文{边距：0；填充：0} .页面标题{ 位置：绝对位置； 最大宽度：38%； 顶部：50px； 左：0； } .英雄头衔{ 背景：rgba0,0,0,4； 填充：15px 15px 15px 40px； } .英雄头衔：：之前{ 内容：； 位置：绝对位置； 左：0； 右：0； z指数：1； 背景：rgba0,0,0,0.5； 宽度：100%； 身高：100%； -webkit过滤器：blur5px； -moz过滤器：blur5px； -o型过滤器：5px； -ms过滤器：blur5px； 过滤器：blur5px； } .文本包装器{ z指数：700； 颜色：fff； 宽度：100%； } .主标题{ 字体大小：36px； 字号：700； 字母间距：-1pt； 线高：1米； 文本转换：大写； } .副标题{ 字体大小：24px； 字体大小：300； 线高：1米； 文本转换：大写； } 主标题在这里 副标题在这里

---

如果我没弄错的话，你想让背景图像像这样模糊

编辑，这也是前面的文本，您可以使用z索引1而不是-1：

我刚刚在图像中添加了一个具有模糊属性的类：

.blur_image {
  filter: blur(10px);
}

---

为了使z指数生效，它需要有如下位置规则：

.text-wraper {
  z-index: 700;
  position: relative;
  color: #FFFFFF;
  width: 100%;
}

---

实际上，在.text wrapper上不需要z索引。我在：.

上举了一个例子，我真的不明白你想在那里做什么。。请检查第二个答案！我试图模糊文本背景。什么文本，在哪个背景之上？你需要模糊的部分是什么？Z指数和这些有什么关系？没有！我试图模糊文本背景，而不是背景image@Arsaar您试图模糊图像背景上的1280 x 500文本？这看起来不可能，因为这是一个图像。最好是自己用代码制作图像，而不是将其作为图像本身加载。。如果不是，我不太明白这个问题，我建议你澄清一下。检查第二个答案@阿尔萨：对，我不明白这个问题。这很简单，您也可以通过将页面标题最大宽度设置为100%来完成这项工作。。。祝你好运