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

Оберните картинку и текст в общий блок с position: relative, а тексту задайте position: absolute. Текст встанет поверх картинки:

<div class="banner">
  <img src="mountains.jpg" alt="Горы на рассвете">
  <p class="banner__text">Поход на Эльбрус</p>
</div>

left и bottom задают отступ текста от левого и нижнего края картинки.

Текст по центру картинки

.banner__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
}

Картинка фоном

Если картинка декоративная, задайте её фоном блока. Текст пишется внутри блока как обычно:

<section class="hero">
  <h1>Поход на Эльбрус</h1>
</section>

Фоновая картинка не видна поисковикам и программам экранного доступа. Если картинка несёт смысл, используйте <img> с alt.

Чтобы текст читался

На светлых участках фото белый текст пропадает. Затемните картинку полупрозрачным слоем:

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 40%);
}

.banner__text {
  z-index: 1;   /* текст выше затемнения */
}

Другой способ — тень у текста: text-shadow: 0 2px 8px rgb(0 0 0 / 60%);.

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

Картинку внутри абзаца ставят тегом <img>, обтекание текстом задают через float:

.article img {
  float: left;
  margin: 0 16px 8px 0;
}

Позиционирование и работу с картинками разбирают на курсе «Профессиональная верстка».