I would like to use the propriety: opacity into my background color. However, when I use this propriety, all the elements become transparent. I just want to change the background color.
Thank you for your help.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
opacity: 0.8;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
}
.page-left-languages{
display: inline-block;
margin-left: 30px;
}
.page-right{
display: inline-block;
float: right;
margin-right: 134px;
}
.page-right-login{
display: inline-block;
float: right;
margin-right: -100px;
}
nav{
position: relative;
top: 6px;
float: right;
right: 92px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
line-height: 27px;
}
nav ul li a{
padding: 8px 16px;
text-decoration: none;
color: #FFF;
text-decoration: center;
border-radius: 3px
}
nav ul li a:hover{
background-color: #FFF;
color: black;
}
.active{
background-color: #cd2122;
color: #FFF;
padding: 8px 16px;
border-radius: 3px;
}<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="page-left-languages">Languages</div>
<div class="page-right">Support</div>
<div class="page-right-login">Login</div>
</div>
<nav>
<ul>
<li><a class="active"><href="#">Home</a></li>
<li><a href="#"> Plan</a></li>
<li><a href="#">Commission</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
</body>
