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

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

@brook 

Вы также можете использовать CSS псевдоэлементы (::before или ::after) для наложения текста на изображение. А вот пример:

1
2
3
4

<div class="image-container">
  <img src="image.jpg" alt="Изображение">
  <p class="text-overlay">Текст на изображении</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.image-container {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
}

.image-container img {
  display: block;
  max-width: 100%;
}

.image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

В этом примере текст будет наложен на изображение с использованием псевдоэлемента ::before для создания полупрозрачного оверлея. CSS свойство z-index позволяет управлять слоями элементов, так что вы можете настроить его в зависимости от вашего дизайна.