CSS element opacity that does not affect transpare

Question

I'm trying to create a <div> that has an opacity of 60%. I want the content of that <div> to be clear and not transparent.

The <div> with the class white_bg should have a white background color with 60% transparency, but the text and the image inside that <div> should be clear and not transparent at all.

Is that possible?

Please note that the text in the paragraph with the class main_content will be dynamic and the height will always change, so I can't just set a width and a height for the white_bg class and use position absolute and place it right behind the paragraph.

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 can use css3's rgba() to set the background colour with an alpha value, and then use a transparent png for IE.

Answer 2

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.

Answer 3

You'd better use semitransparent png as a background.

Answer 4

I am putting code for chrome , FF and IE.. the first code though works on ie9 and above but the second one is for below ei9

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Answer 5

either the semi-trans png as fantactuka mentions, or use position to place non-transparent content over your transparent div a la this blog post:

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 6

Use a semi transparent image, or apply this css to your element:

.white_bg {
    background-color: rgba(255, 255, 255, 0.5);
}