текст поверх изображения без использования относительной позиции или отрицательных полей - PullRequest
Новая
       23

текст поверх изображения без использования относительной позиции или отрицательных полей

2 голосов
/ 05 марта 2020

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

enter image description here

Инструмент / приложение, с которым я работаю, имеет следующие ограничения -

  • Использование отрицательных полей не работает
  • Использование позиции: абсолют и позиция: относительная не работает
  • такие вещи, как grid и flexbox, также не работают

Я знаю, я знаю. Вы все думаете "какого чёрта это?" Но если кто-то из вас использовал шаблоны электронной почты salesforce visualforce, вы поймете, о чем я говорю.

Так что мне нужно реализовать это без них. Я хочу, чтобы изображение сохраняло свое соотношение сторон при сжатии и расширении окна браузера.

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

<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">

Но когда я использую тег img, изображение полностью соответствует экран хорошо, и сохраняет свое соотношение сторон, когда я изменяю размер окна браузера 

<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">

Так что я решил, что мне нужно придумать решение, не используя фоновое изображение (или отрицательное поле или положение: относительное) и каким-то образом получить текст на нем.

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

Похоже, работает в течение длительного времени. Мне нужна помощь, чтобы исправить это. Вот последний код, который у меня есть - 

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div>
        <table>
          <tr>
            <td></td>
            <td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
          </tr>  
          <tr>
            <td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
          </tr>  
        </table>
    </div>
</body>
</html>

Проблема, с которой я сталкиваюсь, заключается в том, что если я слишком сильно сжимаю окно браузера, текст всплывает над синим изображением, как показано ниже

enter image description here

Любая помощь будет оценена. И текст, и изображение являются частью таблицы. Есть ли способ убедиться, что они остаются в пределах таблицы, чтобы они перекрывали друг друга?

1 Ответ

0 голосов
/ 05 марта 2020

Вам необходимо выровнять изображение по верху в элементе <td>, потому что по умолчанию оно среднее. Вот почему он выравнивается таким образом и дает пространство выше и ниже.

Итак, добавьте vertical-align: top к <td> элементу. 

td {
  vertical-align: top;
}
...