Как создать: текстовый блок на изображении

Учимся, как поместить текстовый блок на изображение.

Текстовый блок в изображении

Ухань

Ухань

Какой великолепный город! Я его люблю!

Попробуйте сами

Как поместить текстовый блок в изображение

第一步 - Добавление HTML：

<div class="container">
  <img src="nature.jpg" alt="Норвегия" style="width:100%;">
  <div class="text-block">
    <h4>Вuhan</h4>
    <p>Какой великолепный город! Я его люблю!</p>
  </div>
</div>

第二步 - Добавление 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 позиционирование