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

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

от jazmyne , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от maya , год назад

@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", чтобы управлять выравниванием элементов.

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

от jerrold_langworth , 6 месяцев назад

@jazmyne 

HTML:


1 2 3


CSS:


1 2 3 4 5 6


.background-image { background-image: url(image.jpg); background-size: cover; padding: 50px; text-align: center; }


.d-flex { display: flex; }


.align-items-center { align-items: center; }