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

By: Ilya

Ilya — Fri, 08 Oct 2010 06:51:39 +0000

I agree with the sentiments that this is a less then desirable solution. I was looking for something that would replace jQuery but I guess this can be easily achieved with Javascript. Great comments.

By: Vimeo player inside translucent border

Vimeo player inside translucent border — Tue, 21 Sep 2010 09:02:33 +0000

[...] the child would actually be 25% of normal transparency. Here is an article on the problem CSS Opacity That Doesn’t Affect Child Elements __________________ Follow me on [...]

By: Louis Lazaris

Louis Lazaris — Wed, 15 Sep 2010 20:58:04 +0000

Make sure the element you want to avoid opacity is not a child element of the one that has opacity. That is, don’t wrap it in the child DIV. Place it outside the parent in your HTML, then the opacity will not affect it. You then have to reposition the child using absolute positioning, to make it look like a real child element.

By: shubham

shubham — Wed, 15 Sep 2010 17:04:15 +0000

DUDE ITS NOT WORKING IN MOZZILA FIREFOX

REPLY ME THE ECXACT THE SOLUTION FOR OPACITY BLOCKING

HURRYYYYYYYYYYYYYYYYYYY

M WAITING

1. #alpha_wrapper {
2. width: 540px;
3. height: 360px;
4. float: left;
5. position: relative;
6. color: #fff;
7. }
8.
9. #alpha_2 {
10. background: transparent url(bicycle.jpg) no-repeat 0 0;
11. width: 540px;
12. height: 440px;
13. float: left;
14. filter: alpha(opacity=30);
15. -moz-opacity: 0.3;
16. -khtml-opacity: 0.3;
17. opacity: 0.3;
18. }
19.
20. #text_holder_2 {
21. background: blue;
22. position: absolute;
23. top: 20px;
24. left: 20px;
25. width: 500px;
26. }

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 | 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: 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.