Javascript 如何将3层元素（图像、图像、文本）放置在页面中心？

所以我试图实现的是构建一个HTML页面，它有一个背景和前景，从光标向相反方向移动，而文本跟随光标。解释起来相当复杂，但以下是我在沙盒方面的进展：

文本起初居中，但一旦光标突然出现，它就会捕捉到左上角

此外，我正在努力使其具有移动响应能力。然而，在移动视图中，前景看起来非常小，并且由于字体的大小，页面可以横向移动

如何解决这些问题

最新的
身体{
保证金：0；
填充：0；
}
#背景{
高度：100vh；
背景：url(https://wallpapercave.com/wp/12oNQS9.jpg);
溢出：隐藏；
背景重复：无重复；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#前景{
位置：相对位置；
宽度：30%；
}
#正文{
字体系列：Roboto！重要；
字体大小：300%；
颜色：rgb（0,0,0）；
过滤器：反转（1）灰度（2）对比度（9）；
混合模式：差异化；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
这是我的文本
const backgroundEl=document.getElementById（“背景”）；
const foregroundEl=document.getElementById（“前台”）；
const textEl=document.getElementById（“文本”）；
backgroundEl.addEventListener（“mousemove”，（e）=>{
const moveBackgroundX=（e.pageX*-1）/40；
const moveBackgroundY=（e.pageY*-1）/40；
const moveForegroundX=（e.pageX*-1）/10；
const moveForegroundY=（e.pageY*-1）/10；
常量movetextX=（e.pageX*1）/10；
常量movetextY=（e.pageY*1）/10；
背景。风格。背景位置=
moveBackgroundX+“px”+moveBackgroundY+“px”；
foregroundEl.style.left=移动foregroundx+“px”；
foregroundEl.style.top=moveForegroundY+“px”；
textEl.style.left=movetextX+“px”；
textEl.style.top=movetextY+“px”；
});

对于文本，位置是

绝对的

，因此如果您想保持居中，可以将

左

和

顶

设置为

%

而不是

px

。您还需要自定义

变换

，以正确保持居中

已更正并添加以下代码：

textEl.style.left=movetextX+10+“%”；
textEl.style.top=movetextY+“%”；
textEl.style.transform=“translate（-“+movetextX+”%，-“+movetextY+”）”；

演示

const backgroundEl=document.getElementById（“背景”）；
const foregroundEl=document.getElementById（“前台”）；
const textEl=document.getElementById（“文本”）；
backgroundEl.addEventListener（“mousemove”，（e）=>{
const moveBackgroundX=（e.pageX*-1）/40；
const moveBackgroundY=（e.pageY*-1）/40；
const moveForegroundX=（e.pageX*-1）/10；
const moveForegroundY=（e.pageY*-1）/10；
const movetextX=e.pageX/10；
常量movetextY=e.pageY/10；
背景。风格。背景位置=
moveBackgroundX+“px”+moveBackgroundY+“px”；
foregroundEl.style.left=移动foregroundx+“px”；
foregroundEl.style.top=moveForegroundY+“px”；
textEl.style.left=movetextX+10+“%”；
textEl.style.top=movetextY+“%”；
textEl.style.transform=“translate（-“+movetextX+”%，-“+movetextY+”）”；
});

最新的
身体{
保证金：0；
填充：0；
}
#背景{
高度：100vh；
背景：url(https://wallpapercave.com/wp/12oNQS9.jpg);
溢出：隐藏；
背景重复：无重复；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#前景{
位置：相对位置；
宽度：30%；
}
#正文{
字体系列：Roboto！重要；
字体大小：300%；
颜色：rgb（0,0,0）；
过滤器：反转（1）灰度（2）对比度（9）；
混合模式：差异化；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
宽度：30%；
}
这是我的文本
我在你的js
e.pageX*1
中看不到
*1
的目标，它不会带来任何数学对话吗？可能只是设置：
constmovetextx=e.pageX；const movetextY=e.pageY如果你想让文本跟随光标，我只是复制上面的代码，但是把负值改为正值。请允许我重新表述关于文本光标的问题。我试着让它像前景一样，只是移动一点，只跟随光标的方向，而不是完全跟随光标。我试图使它像一个3d效果，但文字一直运行到左上角。对不起，我的英语不好。请检查我的答案并让我知道