如何在图像上方创建自适应文本？

这是我要进行的更改：

• 放置

  span

  using

  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);}