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

Пользователь

от brook , в категории: HTML/CSS , 5 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от ottilie.farrell , 5 месяцев назад

@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.


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