Set DIV opacity only not text using CSS

hi

I use code for jquery slider here there is description div.

<div id="rot1">
    <img src="" width="643" height="393" class="bg" alt="" />
    <div class="heading">
        <h1></h1>
    </div>
    <div class="description">                      
        <p></p>                         
    </div>
</div>

in CSS define opacity:0.7

.rotator .description{
    width:300px;
    height:180px;
    position:absolute;
    bottom:0px;
    left:0px;
    float:left; 
    background-color:#222;   
    opacity:0.7;
}
.rotator .description p{ 
     width:290px;
     text-align:left;
     margin:10px 0 0 10px;
     text-transform:none;
     letter-spacing:normal;
     line-height:26px;
     font-size:25px;
     float:left;
}

here it will effect opacity in div class description and in P.

I mean both div background and Text will effect opacity.

here I don't want Texts have opacity I want just div class description has opacity.

how I can do it?

Best regards

Neda