CSS opacity på BG, men ikke på indholdet, hvordan?

CSS kode 

 .main_content {
      position:relative;
      width:762px;
      min-height:600px;
      border:solid 1 px #000000;
      padding:0px 5px;
      background-color: rgba(0,0,0,0.6);
 }

Hej UV´er.

Jeg har fået lavet mig nogle sorte bokse i CSS, som jeg har gjort gennemsigtige med en opacity på 60%.

Problemet er bare at alt indholdet i disse bokse også bliver gennemsigtige.
Hvordan undgår man dette?

Eksempel på CSS:

CSS kode 

 .main_content {
     position:relative;
     width:762px;
     min-height:600px;
     background-color:#000000;
     border:solid 1 px #000000;
     padding:0px 5px;
     filter:alpha(opacity=60);
     opacity:0.6;
 }

Så kalder jeg den bare med en:

HTML kode 

 <div clas="main_content"><p> INHOLD </p></div>

live eksempel kan ses her: www.motinf-kbg.dk

CSS kode 

 position:relative;
     top:1em;

Hvis det er så besværligt at få det til at virke.. Hvorfor laver du så ikke et png billede på 1x1 px, med en 60% gennemsigtig sort..
Det tager ingen tid at loade.. Og så virker det over alt..
Bortset fra IE6..

Hvis det er så besværligt at få det til at virke.. Hvorfor laver du så ikke et png billede på 1x1 px, med en 60% gennemsigtig sort..
Det tager ingen tid at loade.. Og så virker det over alt..
Bortset fra IE6..

kan IE6 ikke loade billeder???

Prøv at lav en <div> inden i maincontent og skriv din tekst der