实现文字去模糊背景叠加效果时遇对齐问题求助

要实现的效果是：居中的模糊背景图上叠加文字，文字区域呈现透明效果并显示未模糊的原图。目前已完成居中模糊背景和文字填充原图的效果，但文字内的背景图与模糊背景无法对齐，导致无法实现文字“去模糊”的视觉效果。

问题根源 #

核心问题在于背景定位规则不一致：

• .home-bg 使用 absolute+transform 居中，背景设置了 fixed，导致背景相对于视口定位；
• .home-name 使用 relative+transform 居中，背景同样用了 fixed，但两个容器的位置计算逻辑不同，叠加 transform 的影响后，背景自然出现偏移。

解决方案 #

通过以下修改即可让两者完全对齐：

• 移除两个元素背景属性中的 fixed，让背景相对于容器而非视口定位；
• 将 .home-name 的定位从 relative 改为 absolute，与 .home-bg 保持一致，确保两个容器完全重合；
• 保证两个元素的背景位置、大小参数完全一致；
• 调整文字的垂直居中逻辑，避免默认样式导致的位置偏差。

修改后的完整代码 #

HTML

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

CSS

body {
    background-color: black;
    width: 100vw;
    height: 100vh;
    margin: 0; /* 移除默认边距，避免不必要的滚动条 */
    overflow: hidden; /* 防止模糊效果溢出页面 */
}

.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: absolute; /* 统一为absolute定位，确保容器完全重叠 */
    width: 90%;
    height: 70%;
    background: white url("https://i.ibb.co/mqZcxHx/monstera.jpg") no-repeat center center; /* 移除fixed */
    background-size: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 1;
    font-size: 60px;
    font-family: Helvetica, sans-serif;
    display: flex; /* 让文字在容器内垂直水平居中 */
    align-items: center;
    justify-content: center;
}

.home-name h1 {
    margin: 0; /* 移除h1默认边距 */
}

关键修改说明 #

1. 移除fixed：让背景图以容器为基准定位，确保两个背景的位置参考系一致；
2. 统一定位方式：absolute+transform 能精准让两个容器在页面居中且完全重叠；
3. Flex布局居中：避免默认的文字边距和行高导致的位置偏移，让文字完美覆盖在模糊背景的对应区域；
4. 页面溢出控制：防止模糊效果超出容器后触发滚动条，保证视觉完整性。

内容的提问来源于stack exchange，提问作者Jared Robertson