Это простой способ, где вы можете при помощи CSS, сделать красивое наложение текста по вверх картинки или изображение. Тем вы изначально можете задать название, что в большинстве можно встретить, но также все красиво оформить. Здесь мы просто делаем наложение без всякого дизайна, где выводим знаки в белом оттенке.
HTML
Код
<div class="seducen-apacanu">
<p>ZORNET.RU</p>
</div>
CSS
Код
div {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
background: url("ссылка на изображение");
width: 46.875rem;
height: 31.25rem;
font-size: 3.75rem;
font-family: sans-serif;
}
.seducen-apacanu {
position: relative;
}
.seducen-apacanu::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
}
p {
color: white;
opacity: 1;
z-index: 999;
}
Как можно заметить, что картинку немного затемнили, это по вверх также наложили прозрачно темную гамму.
Демонстрация
