鼠标移动背景图揭示效果：居中背景错位的响应式问题求助

我在网站上实现了鼠标移动触发的背景图揭示效果：将两个带背景图的div叠加，鼠标移动时上层div宽度随鼠标位置变化。当前效果可用但不具备响应式，我希望背景图能无视视口宽度保持居中，但设置background-position-x: center后，上层和下层图片出现错位的问题。

代码示例 #

HTML #

<div class="fox-wrapper">
    <div id="full-fox"></div>
    <div id="empty-fox"></div>
</div>

CSS #

.fox-wrapper {
    height: 100vh;
}

.fox-wrapper #full-fox, .fox-wrapper #empty-fox {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
}

/* "left" (in front) image */
.fox-wrapper #full-fox {
    background-image: url("../page-media/fox-dashed.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 2;
}

/* "right" (behind) image */
.fox-wrapper #empty-fox {
    background: url("../page-media/bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
}

JavaScript #

document.onmousemove = e => {
    const fullFox = document.getElementById("full-fox");
    let x = e.clientX;
    let width = window.innerWidth;
    let percent = 100 * x / width;
    fullFox.style.width = `${percent}%`;
}

Codepen演示：提供了在线示例代码

问题原因 #

上层div宽度随鼠标变化时，background-position: center是以上层div自身的当前宽度为基准计算居中位置，而下层div的背景是以整个视口宽度为基准居中，两者的基准不同导致错位。

修复方案 #

修改上层div的background-position，让背景图始终以整个视口为基准居中，而不是以上层div的宽度为基准。具体调整如下：

修改后的CSS关键代码 #

.fox-wrapper {
    height: 100vh;
    position: relative; /* 新增，确保绝对定位子元素以容器为基准 */
}

.fox-wrapper #full-fox {
    /* 其他样式保持不变 */
    background-position: calc(50vw - 50%) center; /* 替换原background-position */
}

或者更直观的写法：

.fox-wrapper #full-fox {
    background-position-x: 50vw;
    background-position-y: center;
}

原理说明 #

• 50vw代表视口宽度的一半，是固定的视口基准点
• calc(50vw - 50%)是将背景图的中心点与视口的中心点对齐：50%是上层div自身宽度的一半，用视口中点减去这个值，就能让背景图始终和下层视口居中的背景保持对齐。

另外，给.fox-wrapper添加position: relative可以避免绝对定位的子元素脱离文档流后以整个页面为基准，让布局更稳定。

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