我真的不确定如何以其他方式提出这个问题，但是我试图在图像上加载文本-这本身似乎是一个棘手的任务，但是我已经使用本教程进行了学习。不幸的是，该教程有点过时了，我无法找到一种方法来动态更改移动设备的字体大小和跨度，并且仍然将文本保持在图像顶部的正确位置。

调整窗口大小时，文本和框的大小无法正确调整（在图像外部溢出）。

我尝试过百分比调整以及其他技术，但运气不佳。下面显示了我用来在背景上显示文本的CSS。

在图像上叠加文本的最佳实践是什么？如何使其具有响应性？这就是我现在要用于桌面浏览器的内容：

.herotext span {
  position:     absolute;
  top:          80%;
  font-family:  'museo_slab500';
  font-size:    150%;
  color:        #fff;
  padding-left: 20px;
  width:        40%;
  line-height:  35px;
  background:   rgb(0, 0, 0);
  background:   rgba(0, 0, 0, 0.7);
}

最近有人对如何正确处理此问题有任何建议吗？我上面提到的文章来自2009年，我怀疑这不是覆盖文字的最佳方法。