Пытаюсь повторить такой fullscreen из макета хотя бы в общих чертах
Пока до нижней кнопки не дошел. Проблема с прозрачностью фона. Вот, что получается на данный момент
Структура fullscreen
<section class ="fullscreen">
<div class="fullscreen__body">
<h3 class="fullscreen__title">Hello, I am</h3>
<span class ="fullscreen__text fullscreen__text-gradient">John</span>
<h2 class ="fullscreen__text">Smith</h2>
<h3 class ="fullscreen__text fullscreen__text-small">I have more then 10 years of experience</h3>
<a class="fullscreen__btn">download cv</a>
</div>
Стили :
.fullscreen{
display: flex;
min-height: 100vh;
flex: 1 1 auto;
min-width: 100vh;
background-color: #232d50;
}
.fullscreen__body{
min-height: 100vh;
min-width: 100vh;
display: flex;
flex: 1 1 auto;
flex-direction: column;
background-image:url("../images/fullscreen.png");
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
justify-content: center;
align-items: center;
opacity: 0.2;
}
.fullscreen__title {
color: #ebeced;
font-size: 40px;
letter-spacing: 10px;
z-index: 2;
}
.fullscreen__text {
color: #ebeced;
font-size: 45px;
letter-spacing: 10px;
text-transform: uppercase;
z-index: 2;
}
.fullscreen__text-gradient{
color: #a21af0
letter-spacing: 20px;
font-size: 90px;
background: linear-gradient(to top, #a21af0, #ff0072);
-webkit-background-clip : text;
-webkit-text-fill-color: transparent;
font-width: 700px;
}
из-за установки .fullscreen__body opacity: 0.2
Непрозрачным стал весь блок. Установка непрозрачности в 1 для всего что находится в блоке не помогает. Как вернуть непрозрачность тексту, но при этом оставить opacity: 0.2 для фона?