Как создать отзывчивый текст поверх изображения?

Я действительно не уверен, как задать этот вопрос любым другим способом, но я пытаюсь загрузить текст поверх изображения - это, кажется, сложная задача сама по себе, но я ее использую этот учебник. К сожалению, учебник немного устарел, и я не могу определить способ динамического изменения размера шрифта и размера диапазона для мобильных устройств и по-прежнему поддерживать текст в правильном месте поверх изображения.

При изменении размера окна текст и поле не изменяются правильно (он переполняется за пределы изображения).

Я пробовал процентное соотношение размеров, а также другие методы с небольшой удачей. 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 году, и я подозреваю, что это не лучший способ наложения текста.

ОТВЕТЫ

Ответ 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);
}