Как на картинку наложить текст в 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 имеет белый цвет и центрируется внутри контейнера.

Чтобы наложить текст на картинку в 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%) центрирует текст.