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

Чтобы наложить текст на картинку в HTML, можно использовать CSS-позиционирование.

Сперва создадим HTML-структуру:

<div class="image-text-container">
  <img src="путь/к/изображению.jpg" alt="Описание">
  <div class="text-overlay">Ваш текст</div>
</div>

Затем применим CSS:

.image-text-container {
  position: relative;
  display: inline-block;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

Здесь мы используем абсолютное позиционирование для размещения текста поверх изображения. transform: translate(-50%, -50%) центрирует текст.

Для того чтобы наложить текст на изображение в HTML, можно использовать CSS свойство background-image для контейнера с текстом и установить значение background-color для контейнера, чтобы текст был читаемым. Например:

<div class="image-container">
  <h1>Текст наложенный на изображение</h1>
</div>

В данном примере для контейнера с классом image-container устанавливается фоновое изображение с помощью свойства background-image, а также устанавливаются размер фонового изображения, его позиция и повторение. Для того чтобы текст был читаемым, установлено полупрозрачное значение цвета фона с помощью функции rgba(). Контейнер также настроен с помощью свойства display: flex для выравнивания текста по центру. Заголовок h1 имеет белый цвет и центрируется внутри контейнера.