如何在图像上创建响应式文本？

Question

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

调整窗口大小时,文本和框不会正确调整大小(它会溢出图像外).

我已经尝试了百分比大小以及其他技术,运气不佳.我用来在背景图像上显示文本的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年开始的,我怀疑它不是覆盖文本的最佳方式.

Answer 1

以下是我要做的更改:

• 定位span使用bottom而不是top,因此您始终在图像的跨度和底部之间具有特定的边距.
• 使用基于百分比的比例line-height,使其按比例变化font-size
• 在跨度的右侧添加一些填充,因此文本不会在跨度的边缘上向上碰撞

更新的CSS:

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