Text in a transparent div

[graphicsAZ]

How would you override the transparency setting of a parent div?

I have a paragraph tag inside a div. The text and the background of the div are the same color, lets say white. The opacity of the div is set to 60%, how do I keep the text at 100%? By default, whatever child element is in that [60%] div, will automatically be at 60% opacity. I can drop the opacity of the text even further, but if I set it to 100%, that is actually 60% because it is inside the div that is set to 60%. Any ideas? Thanks.

Example:

<div class="transparent">
    <p>This text need to be at 100% transparency, full color.</p>
</div>

div.transparency {
background-color:#fff;
width:150px;
height:350px;
opacity:0.6;
filter:alpha(opacity=60);
margin:0;
padding:10px;
}
div.transparency p {
font:normal 10pt Arial;
color:#fff;
margin:0;
padding:0;
}

[Harry]

.transparent{
  background:rgb(255,255,255); /* For non rgba supportive browsers (yes, IE -- I'm looking at you!) */
  background:rgba(255,255,255,0.6);
}

[graphicsAZ]

Shit that was simple...didn't know you could use alpha in the rgb setting.

Cheers Harry.

[Harry]

No IE support though—considered using a png?

[fear2670]

No IE support though—considered using a png?

Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer Martin Ivanov

But a 1x1 png won't hurt

[graphicsAZ]

Damn IE...yeah I suppose I could use an image. Would just be nice to achieve the effect without the use of an image.

When using opacity (and filter) I cannot get the text to go beyond the parent setting. I can still get the effect to work (like your example) but it uses an empty div tag that I positioned behind the paragraph. Yeah I know...not semantically correct :)

[Harry]

filter: isn't ideal CSS as it's not in any specs—it's an IE only property.

I'd use rgba and be a little 'cutting edge' and use some nice progressive enhancement. Or a png (where you'd have to use another IE proprietary property to get IE6 working).

[graphicsAZ]

Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer Martin Ivanov

But a 1x1 png won't hurt

thanks for the link Fear, and that may fix the issue in IE, but the parent/child issue is a problem in all browsers.

[graphicsAZ]

filter: isn't ideal CSS as it's not in any specs—it's an IE only property.

I'd use rgba and be a little 'cutting edge' and use some nice progressive enhancement. Or a png (where you'd have to use another IE proprietary property to get IE6 working).

yeah the only reason I use filter is for the sake of IE.

"use some nice progressive enhancement" for instance?

[Harry]

View this in IE, then look in Firefox, then in Safari: CSS Wizardry—CSS3 Examples & Progressive Enhancement

That's progressive enhancement.