<body>
<div class="mail-overlay">
<header>
<img src="img/logo.png" alt="Misocial">
<p class="nameCompany">Misocial</p>
</header>
</div>
</body>header{
height: 100vh;
min-height: 772px;
background: url(img/bg.png) no-repeat center / cover; //Зданий фон
opacity: 0.3;
}
.mail-overlay{
//Градиент:
background-image: -moz-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
background-image: -webkit-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
background-image: -ms-linear-gradient( 150deg, rgb(136,211,206) 0%, rgb(110,69,226) 100%);
}
header img{
//Логотип, который должен стать непрозрачным
margin-top: 51px;
margin-left: 51px;
display: inline;
}
.nameCompany{
//Текст, который должен стать непрозрачным
display: inline;
}
<header>
<img src="img/logo.png" alt="Misocial">
<p class="nameCompany">Misocial</p>
</header>
<style>
header{
position: relative;
}
header::after, header::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
opacity: .5;
}
header::after{
// тут Ваша картинка
}
header::before{
// тут Ваш градиент
}
</style>
Простой
Средний
Простой
Простой
