Как разместить текст на картинке CSS

Для размещения текста на изображении в CSS вы можете использовать свойство «position» с значениями «absolute» или «relative», а также свойства «top», «bottom», «left» и «right» для точной настройки положения текста на изображении.

Вот примеры двух методов для размещения текста на изображении:

1. Метод с прозрачным фоном для текста, размещенного поверх изображения:

HTML:

<div class="image-container">
  <img src="path/to/image.jpg" alt="">
  <div class="text-overlay">
    <h2>Заголовок</h2>
    <p>Описание</p>
  </div>
</div>

CSS:

.image-container {
  position: relative;
}

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

.text-overlay h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.text-overlay p {
  font-size: 1.2em;
}

В этом методе мы используем дополнительный элемент «text-overlay» с прозрачным фоном для размещения текста на изображении. Элемент «text-overlay» позиционируется абсолютно внутри контейнера «image-container», а затем устанавливаются свойства «top», «left» и «transform», чтобы центрировать его на изображении. Также мы задаем фоновый цвет и отступы для элемента «text-overlay».

2. Метод с текстом, наложенным на изображение без дополнительных элементов:

HTML:

<div class="image-container">
  <img src="path/to/image.jpg" alt="">
  <div class="image-text">
    <h2>Заголовок</h2>
    <p>Описание</p>
  </div>
</div>

CSS:

.image-container {
  position: relative;
}

.image-text {
  position: absolute;
  color: white;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-text h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

.image-text p {
  font-size: 1.2em;
}

В этом методе мы используем свойства позиционирования «position» и «transform» для элемента «image-text», чтобы разместить его по центру изображения. Также мы устанавливаем цвет текста на белый и задаем выравнивание посредством свойства «text-align».

Выбор метода зависит от требований макета и предпочтений дизайнера.