目标：居中模糊的“背景”图像与文本叠加，其中文本“填充”看起来是透明的，并且显示“背景”图像不模糊。
状态：我已经创建了一个div，图像以黑色背景为中心，并进行了模糊处理。我已经设法覆盖一个单独的div与h1和文本，其中文本的填充是相同的原始背景图像，但不模糊。
问题：我不知道如何将文本的填充图像与原始模糊的“背景”图像对齐，使文本看起来是透明的，并消除背景图像的模糊。相反，文本填充图像从背景图像偏移，并且没有实现整体效果。
产品编号：https://codepen.io/unknown-error-event/pen/eYPKqWy

<div class="home-bg"></div>
<div class="home-name">
<h1>This is<br>Something</h1>
</div>

body {
    background-color: black;
    width: 100vw;
    height: 100vh;
}

.home-bg {
    width: 90%;
    height: 70%;
    background:  black url("https://i.ibb.co/mqZcxHx/monstera.jpg") no-repeat center center fixed;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(12px);
    z-index: -1;
}

.home-name {
    position: relative;
    width: 90%;
    height: 70%;
    background: white url("https://i.ibb.co/mqZcxHx/monstera.jpg") no-repeat center center fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    padding: 0;
    z-index: 1;
    font-size: 60px;
    font-family: Helvetica, sans-serif;
    text-align: center;
}