CSS3 opacity problem

**wayfarer07** · 11:05 AM

As many of you know, opacity has been the most widely implemented CSS3 feature. It is very nice, allowing you to create transparency on just about anything, including images, text or a div. It is, however, not without its quirks. Take this simple example:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Opacity Test</title>
<style>
body {
    background: #03f;
}
div#transparent {
    opacity: .5;
    background: #060;
    width: 200px;
    padding: 10px;
    position: absolute;
    top: 35px;
    z-index: 2;
}
div#not_transparent {
    opacity: 1;
    background: #fff;
}
</style>
</head>
<body>
    <h2>Hello World</h2>
    <div id="transparent">
        <div id="not_transparent">
        <h3>Hello World</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
        </div>
    </div>
    
</body>
</html>

Cut and paste the above code into your favorite text editor, then preview it in Firefox.

The div with the id of "not_transparent", although it is very clearly defined as having an opacity of 1 (zero transparency), still inherits the opacity of it's parent, the div "transparent". The nice blue of the background and green of the transparent div show right through the black font and white background of the not_transparent div. You cannot prevent opacity from inheriting, which is a real pain if you want to use these divs as containers.

If anyone knows a solution to this problem, I'd love to hear it. I don't think there is one, however.

**davemies** · 12-12-2007, 10:26 AM

sounds like you need to set the opacity for each div then?!

**wayfarer07** · 12-12-2007, 10:32 AM

As you can see, I have explicitly set the opacity of the child div to 1 (which means zero transparency). However, it still has transparency. This cannot be helped, as far as I know. Set it for each div all you like. If it's within an opaque div it will be opaque. Try putting more children into the child div like little russian-dolls and watch them all be opaque.

**shivaji** · 12:38 PM

Quote:

Try putting more children into the child div like little russian-dolls and watch them all be opaque.

Then don't insert not_transparent div like children. Set one tranparent div (position, height, width, etc.) and second one (position, height, width, etc.) with higher z-index.

Shivaji

**wayfarer07** · 12-12-2007, 01:07 PM

Yes, I understand what you are trying to say, and I know that if the div not_transparent is positioned (say absolutely), is outside of the other div, and is the top layer, it will not be opaque. However, consider for a moment that it could be useful, or at least nice to have an opaque div that holds un-transparent content (like a drop down menu with solid text).

I thought this might be an interesting discussion.

**Harlequin** · 12-12-2007, 01:16 PM

All CSS elements inherit values from their parents (AFAIK).

**LadynRed** · 12-12-2007, 03:00 PM

Since CSS3 is barely supported in ANY browser, this is a nice exercise, but not really practical at this point. IE6 doesn't support it and that's still almost 70% of the browser users out there.

**wayfarer07** · 12-12-2007, 05:54 PM

Quote:

IE6 doesn't support it and that's still almost 70% of the browser users out there.

True, but IE6 supports the alpha transparency filter. It's almost exactly the same as the opacity statement, which is supported by EVERY major browser except for the IEs, which as stated support the alpha transparency filter, which works about the same, the only difference that I've noticed being a slightly reduced quality to transparent text.

Read this guideline: http://www.quirksmode.org/css/opacity.html

**shivaji** · 12-12-2007, 06:23 PM

All this is nice but why pages with opacity get errors on CSS validation. For example, here is tutorial for opacity:
http://www.w3schools.com/css/css_image_transparency.asp

and on their own CSS validator result is 9 errors:
http://jigsaw.w3.org/css-validator/v...ansparency.asp

Shivaji

**chrishirst** · 12-12-2007, 07:58 PM

well validating CSS3 code through a CSS2 validator would throw a few errors.

**LadynRed** · 12-13-2007, 02:51 PM

Quote:

but IE6 supports the alpha transparency filter.

Yes, and it works.. as long as you're not using it on a REPEATING graphic, then it fails miserably.

**shivaji** · 12-13-2007, 07:56 PM

Quote:

well validating CSS3 code through a CSS2 validator would throw a few errors.

Oooo, that is problem. Thanks, Chris.

**frost** · 12-14-2007, 01:11 AM

I am fairly sure that behavior of opacity is written in the w3c docs, so technically it's not a quirk. That's why it behaves in this manner in all browsers, including IE 7 (using the alpha filter) and Opera. I've seen this type of discussion before, and it usually turns out that the best two solutions (which were already mentioned here) are to either use absolute positioning outside of the opaque element, or use a transparent PNG background with the appropriate IE 6 css hacks for opacity and repeating images.

Personally, I prefer the transparent PNG solution, because absolute positioning always ends up a hassle for me if I change an image or add text and displace the element or something.

**wayfarer07** · 12-14-2007, 11:28 PM

I didn't say it was a quirk. Perhaps it should have been specified better by the WC3, but I'm not going to complain about that organization. Besides, the CSS3 is specs are far from final and could be changed, and as LadynRed pointed out, have barely been implemented. Maybe the final spec for this attribute will be modified.

Good point about transparent PNG's. Unfortunately IE6 does not support them, so lesser quality GIF's must be pointed at that browser.

**wayfarer07** · 12-14-2007, 11:31 PM

Errr... was reading my first post... Guess I did say it was a quirk. Didn't mean that in the literal sense

**SHydroxide** · 12-15-2007, 01:08 AM

Quote:

Originally Posted by LadynRed

Since CSS3 is barely supported in ANY browser, this is a nice exercise, but not really practical at this point. IE6 doesn't support it and that's still almost 70% of the browser users out there.

IE6 is only 34.5% of the market share. All versions of IE in total don't even command 70%.

**LadynRed** · 12-15-2007, 01:37 PM

It varies by audience. As I said, MY STATS show that there are far more than 34.5% of my visitors using IE6. The point is, alienating 35% of web users is NOT a good idea.

**SHydroxide** · 12-15-2007, 04:07 PM

Quote:

Originally Posted by LadynRed

It varies by audience. As I said, MY STATS show that there are far more than 34.5% of my visitors using IE6. The point is, alienating 35% of web users is NOT a good idea.

Show me where I said it was.

**wayfarer07** · 12-16-2007, 12:01 AM

I think we can all agree that we look forward to the time that CSS3 really is widely implemented. Multiple backgrounds and native rounded corners etc will be pretty smokin' cool.

**LadynRed** · 12-16-2007, 11:03 AM

Quote:

Show me where I said it was.

You didn't and I wasn't implying that YOU said it at all. I was referring to the WIDER reference.

Quote:

I think we can all agree that we look forward to the time that CSS3 really is widely implemented

Amen to that !