Полупрозрачный текст на фоне изображения

  alexei 11/09/2022 - 09:52

Здесь вы узнаете, как сделать изображение с полупрозрачным блоком текста при помощи CSS.


Notebook

Заголовок

Ясность нашей позиции очевидна: консультация с широким активом предполагает независимые способы реализации стандартных подходов. Как уже неоднократно упомянуто, действия представителей оппозиции, вне зависимости от их уровня, должны быть обнародованы.


Как сделать полупрозрачный блок текста на фоне изображения

Шаг 1) Добавляем HTML:


<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Ясность нашей позиции...</p>
  </div>
</div>

Шаг 2) Добавляем 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 (50%) */
  color: #f1f1f1; /* Серый цвет текста */
  width: 100%; /* Растягиваем на всю ширину */
  padding: 20px; /* Добавим отступов */
}