12

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

当调整窗口大小时，文本框没有正确调整大小（它溢出图像之外）。

我尝试了百分比大小以及其他技术，但运气不佳。我用来在带有背景的图像上显示文本的 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 年，我怀疑这不是覆盖文本的最佳方式。

4

1 回答 1

13

以下是我要做的更改：

  • 定位spanusingbottom而不是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);
}
于 2013-07-02T01:33:36.653 回答