@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 прозрачный. Как сделать, чтобы эти элементы перестали быть прозрачными?
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ответы на вопрос 3
Moskus
@Moskus
Убрать у .header свойство opacity, отредактировать bg.png так, чтобы само изображение было полупрозрачным, отредактировать свойства градиентов, чтобы они были полупрозрачными.
Ответ написан
@ffqs
я бы присвоил бекграунд header::after с height и width 100%, у самого header - position: relative
Ответ написан
alsolovyev
@alsolovyev
Старайтесь избегать ненужные блоки:
<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>
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
TekLabs Санкт-Петербург
от 175 000 руб.
VAMDODOMA.RU Кострома
от 70 000 до 100 000 руб.
18 июля 2018, в 23:01
5000 руб./за проект
18 июля 2018, в 22:20
4000 руб./за проект