Как сделать текст на картинке в bootstrap?

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

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

Как сделать текст на картинке в bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от maya , 2 месяца назад

@jazmyne 

Вы можете использовать CSS-свойства, такие как "background-image" и "background-size", чтобы установить картинку в фоне HTML-элемента, и использовать "padding" и "text-align" для размещения текста на картинке.


HTML:

1
2
3
<div class="background-image">
  <p>Text on Image</p>
</div>


CSS:

1
2
3
4
5
6
.background-image {
  background-image: url(image.jpg);
  background-size: cover;
  padding: 50px;
  text-align: center;
}


Вы можете также использовать классы Bootstrap, такие как "d-flex" и "align-items-center", чтобы управлять выравниванием элементов.