Здравствуйте. У меня в блоке есть элемент(гиперссылка-кнопка)
<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;
}
