Opacity of main-outlet

Hi I’ve been trying to change to opacity and colour of the main-outlet using this code:

#main-outlet {
background-color: rgb(60,60,60):opacity:0.6;
padding-left: 10px;
padding-right: 10px;
}

but it fails to work as it sets the opacity of EVERYTHING inside the main-outlet and not just the background. Thanks.

Right, by default the opacity on a parent element in CSS will apply to everything nested within.

You can avoid this by applying the opacity to the background color using an rgba (a = alpha) value. So in this case:

background-color: rgba(60,60,60,.6);

6 Likes