Comments on: CSS Opacity That Doesn’t Affect Child Elements

By: MikePriest

MikePriest — Wed, 21 Apr 2010 14:35:11 +0000

IE 6 can support transparent PNG’s take a look with javascript:

http://24ways.org/2007/supersleight-transparent-png-in-ie6

jQuery version:

http://jquery.andreaseberhard.de/pngFix/

Hope this helps you out.

By: Mike

Mike — Mon, 12 Apr 2010 19:06:22 +0000

@ Chris:

Thanks, that was a really good idea and easy solution to my problem. The only issue is that IE6 doesn’t support transparent .pngs, but that’s a sacrifice.

By: CSS Opacity: A Comprehensive Reference « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

Fri, 26 Mar 2010 09:25:10 +0000

[...] to note about both RGBA and HSLA transparency is that these transparency settings don’t affect child elements the way the opacity property does. The alpha setting for RGBA and HSLA affects the opacity of the [...]

By: CSS Opacity: A Comprehensive Reference | Impressive Webs Toronto

CSS Opacity: A Comprehensive Reference | Impressive Webs Toronto — Fri, 26 Mar 2010 05:51:51 +0000

[...] note about both RGBA and HSLA transparency is that these transparency settings don’t affect child elements the way the opacity property does. The alpha setting for RGBA and HSLA affects the opacity of the [...]

By: Kravimir

Kravimir — Thu, 25 Mar 2010 18:08:20 +0000

I’ve used a similar technique before, but I gave “position:relative” to the element equivalent to “#text_holder_2″ and “position:absolute” to the element equivalent to “#alpha_2″ (and set z-index properties as needed) in order to avoid losing control of the document flow.

Now though, I use a PNG and DD_belatedPNG for IE6 ( http://www.dillerdesign.com/experiment/DD_belatedPNG/ ).

By: chris

chris — Thu, 17 Sep 2009 16:33:49 +0000

The simplest and most reliable solution, it seems to me, is to employ a background image, such as a 1 x 1 pixel semi-transparent png or gif that repeats through the containing element. This allows for a dynamic (elastic) result based upon the changing dimensions of the content within the container.

By: CSS Opacity That Doesn’t Affect Child Elements | Impressive Webs

CSS Opacity That Doesn’t Affect Child Elements | Impressive Webs — Tue, 01 Sep 2009 00:12:10 +0000

[...] Read this article: CSS Opacity That Doesn’t Affect Child Elements | Impressive Webs [...]

By: 精品阅读（5）20090821 « 寂寞如哥

精品阅读（5）20090821 « 寂寞如哥 — Fri, 21 Aug 2009 05:47:44 +0000

[...] 6、不影响子元素的CSS透明方法 http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ [...]

By: Impressive Webs

Impressive Webs — Tue, 18 Aug 2009 17:37:03 +0000

@Alex:

Thanks for the heads up on that. Generally, for tutorial stuff, I don’t do extensive testing in every browser. I just don’t have the time for that. But I usually do a quick check in the basic 3 (IE6, IE7, FF3).

I’ve corrected it, and at the same time learned an interesting way to fix IE6 absolute positioning bugs: Add “clear: both” to the absolutely positioned element.

Thanks again.

By: Alex

Alex — Tue, 18 Aug 2009 17:01:49 +0000

You’re example doesn’t work in ie6 (parallels)… the blue box and the text have disappeared on the right hand example.

Which browsers were you testing in? ie6 is still being used by lots of people, if you are producing accessible web sites you still have to consider them.

To any ie6 users who are reading this… it’s time to move on & get a different browser, save us developers a headache!