Changing the outer opacity without affecting the inner in CSS

Question

The effect I want to create is a transparent border effect. I have created the box using two div tags, one for the inner and one for the outer. `

The HTML I used for this is:

<div class="main_box_outer">
    <div class="main_box_inner">
    </div><!--/ inner-->
</div><!--/ outer-->`

The CSS I used to create this is:

.main_box_inner {
width: 30em;
height: 20em;
background: white;
border-radius: 1em; }


.main_box_outer {
display: inline-block;
background: black;
padding: 1em;
border-radius: 2em; 
opacity:1; }

However, when I change the opacity of the outer box (the border) in CSS, it also changes the inner box's opacity because the inner box div is contained inside the outer box div. How can I change the outer opacity without affecting the opacity of the inner box?

Answer 1

Use rgba for your background color:

{ background: rgba(0,0,0,.5); }

View on JSFiddle

rgba is a way to define a color including the alpha channel (its opacity). The alpha channel goes from 0 to 1, just like opacity. It can be used on any property that can have a color set: color, background, border, and so on.

Note that earlier versions of IE don't support rgba colors; they just place the alpha channel at 1.