@ozerovlife

Как отменить opacity у элемента блока?

Здравствуйте. У меня в блоке есть элемент(гиперссылка-кнопка)
<div class="bunch_button"><a href="">READ MORE</a></div>
.
Для элемента background должен быть белый. Но так как у родителя opacity 0.82 соответственно и элемент наследует не нужную ему прозрачность.
Пробовал position: absolute, выравнивал как надо, и relative задал блоку у которого opacity вообще не прописан, но проблема все равно осталась. Как сделать чтобы у кнопки был background: white; без прозрачности???
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width" />
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="wrapper">
		<div class="content">
			<div class="header">
				<div class="header_wrap">
					<div class="hat">
						<div class="hat__logo">BRUNCH</div>
						<div class="hat_wrap">
						<div class="hat__nav">
							<div class="nav_element"><a href="#">WELCOME</a></div>
							<div class="nav_element"><a href="#">MENU</a></div>
							<div class="nav_element"><a href="#">EVENTS</a></div>
							<div class="nav_element nav_margin"><a href="#">CONTACT</a></div>
						</div>
						</div>
					</div>
					<div class="bunch">
						<div class="bunch_top">
						<div class="bunch__pos">
							<div class="bunch_title">Brunch</div>
							<div class="bunch_sub">full WEBSITE</div>
							<div class="bunch_button"><a href="">READ MORE</a></div>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>




</body>
</html>


@import "null.scss";
@import url('https://fonts.googleapis.com/css?family=Cookie|Raleway:400,600,700|Roboto:400,700&display=swap');

.wrapper {}
.content {
	max-width: 1440px;
}
.header {}
.header_wrap {
	background: url(../img/header.png) 0 0 no-repeat;
	max-width: 1440px;
	width: 100%;
	height: 1000px;
}
.hat {
	display: flex;
	padding: 62px 0 0 0 ;
	justify-content: space-around;

}
.hat__logo {
	

	opacity: 0.78;
	color: #ffffff;
	font-family: Raleway;
	font-size: 35px;
	font-weight: 700;
	text-transform: uppercase;

}
.hat_wrap{
	/*margin: 0 0 0 288px;*/
	
}
.hat__nav {
	display: flex;
	margin: 0 -12.5px;
	
}
.nav_element a{
	padding: 0 12.5px;
	opacity: 0.78;
	color: #ffffff;
	font-family: Raleway;
	font-size: 35px;
	font-weight: 700;
	text-transform: uppercase;
	/*margin*/
}
.nav_margin{

}
.bunch {
	display: flex;
	justify-content: center;
	margin: 220px 0 0 0;
}
.bunch_top{
	position: relative;
}
.bunch__pos {
	background-color: #ffffff;
	opacity: 0.82;
	text-align: center;
	padding: 119px 0;
	width: 758px;
	

}
.bunch_title {
	color: #2c3a42;
	font-family: Cookie;
	font-size: 104px;
	font-weight: 400;
	

}
.bunch_sub {
	color: #ad6c12;
	font-family: "Raleway - Semi Bold";
	font-size: 77px;
	font-weight: 400;
	text-transform: uppercase;

}
.bunch_button {
	position: absolute;
	left: 50%;
	bottom: 0;
	background-color: white;
	width: 267px;
	height: 60px;
}
.bunch_button a{
	color: #26363a;
	font-family: "Raleway - Semi Bold";
	font-size: 38px;
	font-weight: 400;
	text-transform: uppercase;
}
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
@Hellayas
Задать родителю background: rgba(0, 0, 0, 0.1); в соответсвии с необходимостью
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы