Roderick Lord Roderick Lord - 15 days ago 7
CSS Question

How to prevent outer <div> CSS from affecting inner <div> CSS

I have set opacity on the outer wrapper to (0.5). However, this sets all the inner elements' opacity to (0.5) also. How can I make it so that the inner elements have an opacity of 1? Thanks!

//..The HTML..//

<div class="nav-wrapper">

<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>

</div>

//..The CSS..//

.circle1 {
width: 80px;
height: 80px;
border-radius: 50%;
background: #BBBBBB;
}

.nav-wrapper {
height: 100%;
width: 100%;
top: 0;
opacity: 0.5;
background: white;
}

Answer

You should use a rgba background instead of opacity for the nav-wrapper

.nav-wrapper {
    height: 100%;
    width: 100%;
    top: 0;
    //opacity: 0.5;
    //background: white;
    background: rgba(255,255,255, 0.5);
}
Comments