Javascript 使文本位于图像上的一条线上

我正在做一个项目，在这个项目中，我试图在所有浏览器大小的图像上生成一条线以上的文本。一旦您看到下面的codpen链接，这将更加清楚

我现在面临的问题是，一旦我将top值设置到正确的位置并更改浏览器宽度，文本就不再位于行上方

#文本{
位置：绝对位置；
顶部：685px；
}
html，正文{
保证金：0；
填充：0；
}
#背景图片
{
宽度：100%；
}

你好，世界

您从顶部将

#文本设置为静态位置，这不会对所有屏幕尺寸（可能会变化）起作用，这将导致图像变化

您希望根据图像高度动态设置文本。下面是一个使用JavaScript的示例：


函数setTextPosition（）{
//获取html元素
var image=document.querySelector（'#background_pic'）；
var text=document.querySelector（“#text”）；
//获取图像的高度
var imageHeight=image.clientHeight；
//动态设置文本位置（'-20'用于使文本保持在行上方）
text.style.top=imageHeight/2-20+'px'；
}
//设置加载时的文本位置并调整大小
window.addEventListener（'load'，setTextPosition）；
addEventListener（'resize'，setTextPosition）
#文本{
位置：绝对位置；
顶部：685px；
}
html，正文{
保证金：0；
填充：0；
}
#背景图片
{
宽度：100%；
}

你好，世界
如果您真正想要的是一条黑线上方的文本，该黑线两端各有一个半径，那么您只需使用CSS就可以实现更简单的操作

通过将文本和行包装到另一个元素中，可以在两个元素的上方和下方创建空间：


#包装器{
利润率：100px0；
}
.下划线{
边框：3倍纯黑；
边界半径：10px；
}

你好，世界！
Codepen链接不起作用。@您必须向下滚动才能看到该行。请不要将代码发布到第三方网站。只需将您的代码包含在“代码片段”中，就在您的问题的这里。您有什么理由不使用CSS来划出黑线吗？@ScottMarcus哇，太快了。刚准备从中创建一个代码段。请将您的工作解决方案发布在“代码段”的答案中。这使我们更容易看到您的答案，并确保将来始终可以访问您的答案。我正在获取style not DefineuUncought TypeError:无法在处读取null的属性“style”setTextPosition@halmos这意味着文档未完全加载。您是否正在使用
窗口。addEventListener（'load'，setTextPosition）事件侦听器以确保首先加载页面？@halmos那么，情况如何？看来这就是你正在做的事情。问题比前面介绍的要复杂得多。目前看来@Johnatan的思路是正确的。参考他的回答