Как наложить текст на картинку в html?

@brook 

Существует несколько способов наложить текст на изображение в HTML:

1. С помощью абсолютного позиционирования:

1
2
3
4
5
6

<div style="position: relative;">
  <img src="image.jpg" alt="Изображение">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.7); padding: 10px;">
    <p>Текст на изображении</p>
  </div>
</div>

В данном случае используется контейнер с относительным позиционированием, в котором помещается изображение и див с текстом. Див с текстом имеет абсолютное позиционирование и настраивается с помощью свойств top, left и transform, чтобы разместить его по центру изображения. Также задается фоновый цвет и отступы для дива с текстом.

1. С помощью фонового изображения:

1
2
3

<div style="background-image: url(image.jpg); background-size: cover; text-align: center; padding: 50px;">
  <p style="background-color: rgba(255, 255, 255, 0.7); display: inline-block; padding: 10px;">Текст на изображении</p>
</div>

В этом варианте используется фоновое изображение для контейнера. Текст размещается внутри контейнера с помощью параграфа <p>, установленного на задний план с помощью свойства background-color. Внешний контейнер центрирует содержимое при помощи свойства text-align.

Конечно, вы можете настроить стили и позиционирование под ваше конкретное требование.