Здесь вы узнаете, как сделать изображение с полупрозрачным блоком текста при помощи CSS.
Заголовок
Ясность нашей позиции очевидна: консультация с широким активом предполагает независимые способы реализации стандартных подходов. Как уже неоднократно упомянуто, действия представителей оппозиции, вне зависимости от их уровня, должны быть обнародованы.
Как сделать полупрозрачный блок текста на фоне изображения
Шаг 1) Добавляем HTML:
Пример
<div class="container">
<img src="//msiter.ru/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; /* Добавим отступов */
}
