Как сделать - Изображение с текстовым блоком
Узнать, как разместить текстовые блоки поверх изображения.
Изображение с текстовым блоком
Создать изображение с текстовым блоком
Шаг 1) Добавить HTML:
Пример
<div class="container">
<img src="nature.jpg" alt="Норвегия" style="width:100%;">
<div class="text-block">
<h4>Природа</h4>
<p>Какой прекрасный восход солнца</p>
</div>
</div>Шаг 2) Добавить CSS:
Пример
/* Контейнер, содержащий изображение и текст */
.container {
position: relative;
}
/* Нижний правый текст */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}Редактор кода »Чтобы узнать больше о том, как стилизовать изображения, прочитайте наш учебник CSS Изображения.
Чтобы узнать больше о позиционировании CSS, прочитайте наш учебник CSS Позиция.
