Заголовок
Lorem ipsum dolor sit amet, an his etiam torquatos.
Как сделать - Изображение с прозрачным текстом
Узнать, как создать изображение с прозрачным (видеть насквозь) фоновым текстом, используя CSS.
Изображение с прозрачным текстом
Создать изображение с прозрачным текстом
Шаг 1) Добавить HTML:
Пример
<div class="container">
<img src="notebook.jpg" alt="Блокнот" style="width:100%;">
<div class="content">
<h1>Заголовок</h1>
<p>Lorem ipsum..</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 непрозрачностью */
color: #f1f1f1; /* Серый текст */
width: 100%; /* Полная ширина */
padding: 20px; /* Немного отступов */
}
Редактор кода »