CSS Opacity little problem ...

Question

Hello everyone ...

I'm trying to create a div that has the opacity of 60%, but i want the content of that div to be clear and not transparent.

The div with the class "white_bg" should have the background color white with 60% transparency, but i want the text and the image inside that div to be clear and not transparent at all ... is that possible to do ?? please note that the text in the paragraph with the class "main_content" will be dynamic and the height will always change, so i cant just set a width and a height for the div "white_bg" and use position absolute and place it right behind the paragraph.

You can check the page at http://www.sit-lab.com/graphweb/

Thanks in advance.

HTML

<div class="white_bg">
    <h1 class="main_titles">Toon Boom Animate</h1>
    <h6 class="subtitles">The Most Reliable Flash Animator Companion</h6> 

    <p class="main_content">
    <img class="floatright" src="images/images.jpg" alt="" />
              text comes here
    </p> 
</div>

Answer 1

You'd better use semitransparent png as a background.

Answer 2

You can use css3's rgba() to set the background colour with an alpha value, and then use a transparent png for IE.

Answer 3

For you white_bg class use this:

.white_bg
{
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

Between those four properties, your bases should be pretty well covered for any major browser.