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