Изображение с надписью

Введение

В этом лабе мы углубимся в мир программирования CSS. Цель этого лабораторий - помочь вам лучше понять CSS и его роль в веб-разработке. Вы научитесь стилизовать HTML-элементы, применять различные типы CSS-селекторов и создавать адаптивные макеты с использованием CSS.

Изображение с надписью

В ВМ уже предоставлены index.html и style.css.

Для отображения изображения с надписью используйте элементы <figure> и <figcaption>. В CSS используйте свойство linear-gradient, чтобы создать эффект наложения над изображением. Вот пример кода:

<figure class="text-overlay-image">
  <img src="https://picsum.photos/id/971/400/400.jpg" />
  <figcaption>
    <h3>Business <br />Pricing</h3>
  </figcaption>
</figure>

.text-overlay-image {
  box-sizing: border-box;
  position: relative;
  margin: 8px;
  max-width: 400px;
  max-height: 400px;
  width: 100%;
}

.text-overlay-image figcaption {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
  color: #fff;
  padding: 16px;
  font: 700 28px/1.2 sans-serif;
}

.text-overlay-image figcaption h3 {
  margin: 0;
}

Пожалуйста, нажмите на кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили лабораторию "Изображение с надписью". Вы можете практиковаться в других лабораториях в LabEx, чтобы улучшить свои навыки.