@xcomvlad
Wed developer

Как сделать непрозрачные элементы в прозрачном блоке?

У меня есть код:
<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 (лого и текст) становятся прозрачными, т.к. сам header прозрачный. Как сделать, чтобы эти элементы перестали быть прозрачными?
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 3
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Вакансии с Моего Круга Все вакансии
Заказы с Фрилансим Все заказы