Html 有没有办法通过顺风CSS在div中模糊的bg图像上添加清晰的图像和文本？

我已经在这个问题上工作了大约4个小时了，但我什么也没想到

我希望能够为我的网站制作一个卡片元素，我希望背景模糊，但我希望在模糊的图像和文本之上有一个图像

我正在使用顺风，到目前为止，我的尝试已经模糊了一切

这是我的尝试

---

你需要摆弄一下位置：相对位置和绝对位置。还需要filter:bluepx-on-style属性

参见一个工作示例

---

这回答了你的问题吗？不，这真的没用，谢谢！这正是我需要的。Z-指数是缺失的，谢谢！

<div class="w-80 h-96 relative">
  <div class="absolute inset-0 z-0">
    <img src="https://static.wikia.nocookie.net/jumanji/images/1/1b/Jumanji_2017_Poster.jpg/revision/latest/scale-to-width-down/1000?cb=20181023182751" alt="" srcset="" style="filter: blur(4px)" />
  </div>

  <div class="absolute inset-0 z-10">
    <div class="flex flex-col transform scale-75 space-y-4">
      <img src="https://static.wikia.nocookie.net/jumanji/images/1/1b/Jumanji_2017_Poster.jpg/revision/latest/scale-to-width-down/1000?cb=20181023182751" alt="" srcset="" />
      <div class="text-white text-2xl text-center">Jumanji</div>
    </div>
  </div>
</div>