Как создать: Изображение с прозрачным текстом

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

Прозрачное изображение с текстом

Норвегия
Заголовок

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

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

Как создать прозрачное изображение с текстом

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

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

第二步 - Добавление CSS:

.container {
  position: relative;
  max-width: 800px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
}
.container .content {
  position: absolute; /* Позиционирование фона текста */
  bottom: 0; /* Внизу. Используйте top: 0 для подключения к верху */
  background: rgb(0, 0, 0); /* Возврат цвета */
  background: rgba(0, 0, 0, 0.5); /* Непрозрачность черного фона 0.5 */
  color: #f1f1f1; /* Серый текст */
  width: 100%; /* Полная ширина */
  padding: 20px; /* Некоторые внутренние поля */
}

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