Как сделать непрозрачные элементы в прозрачном блоке? У меня есть код:
Misocial
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 прозрачный. Как сделать, чтобы эти элементы перестали быть прозрачными?
Как сделать непрозрачные элементы в прозрачном блоке? У меня есть код:
Misocial
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 прозрачный. Как сделать, чтобы эти элементы перестали быть прозрачными?
Misocial
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 прозрачный. Как сделать, чтобы эти элементы перестали быть прозрачными?
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Чтобы сделать непрозрачные элементы в прозрачном блоке, вы можете применить свойство opacity к элементам header (лого и текст) отдельно. Например:
header img,.nameCompany {
opacity: 1;
}
Это установит непрозрачность элементов логотипа и текста обратно на 100%, даже если их родительский элемент (header) имеет установленное свойство opacity.