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

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

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

.image-container {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  /* Значение rgba(0,0,0,0.5) задает полупрозрачный черный цвет фона */
}

h1 {
  color: white;
  font-size: 3em;
  text-align: center;
}

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