html - Layer one DIV over another to provide a transparent background with strong text -

what want have div transparent background doesn't affect text. consider following html:

<section class="content">     <header>         <h1>description</h1>     </header>     code </section> 

if give following css:

background-color: #7ac0da; opacity: 0.5; filter: alpha(opacity=50); 

the text suffer transparency of section. so, started trying layer content this:

<div class="code-sample">     <div class="background"></div>     <section class="content">         <header>             <h1>description</h1>         </header>         code     </section> </div> 

however, enumerable number of iterations i'm unable section layer on div. i'll honest, i've tried positioning inner div , section absolute , relative. i've tried using z-index. really, i'm shooting in dark here. i'd .background have transparent look:

background-color: #7ac0da; opacity: 0.5; filter: alpha(opacity=50); 

but yet .content overlay div. allow me float .code-sample div , three-column layout those.

how can achieve i'm looking for?

use rgb color set transparency background:

.class {        /* fallback web browsers don't support rgba */    background-color: rgb(0, 0, 0);    /* rgba 0.6 opacity */    background-color: rgba(0, 0, 0, 0.6);    /* ie 5.5 - 7*/    filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#99000000, endcolorstr=#99000000);    /* ie 8*/    -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr=#99000000, endcolorstr=#99000000)"; } 

source