Задать вопрос
@xcomvlad
Wed developer
html

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

У меня есть код:
<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 прозрачный. Как сделать, чтобы эти элементы перестали быть прозрачными?
  • Вопрос задан
  • 238 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
Moskus
@Moskus
Убрать у .header свойство opacity, отредактировать bg.png так, чтобы само изображение было полупрозрачным, отредактировать свойства градиентов, чтобы они были полупрозрачными.
Ответ написан
Комментировать
Комментировать
@ffqs
я бы присвоил бекграунд header::after с height и width 100%, у самого header - position: relative
Ответ написан
Комментировать
Комментировать
alsolovyev
@alsolovyev
¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
Старайтесь избегать ненужные блоки:
<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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Поправить сайт (мобильная версия) на WordPress
24 нояб. 2024, в 04:16
5000 руб./за проект
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Ещё заказы