jQuery("#wrapper").css({ opacity: 0.5 })

Question

I just applied a opacity to a #wrapper div with a solid color:

jQuery("#wrapper").css({ opacity: 0.5 })

This works nicely, but I don't want their children divs to inherit the opacity. How do I avoid this behavior without using PNG transparency hacks?

The short answer is you can't. You will have to place the contents in a different container. — Pekka
– Pekka, Commented Feb 10, 2011 at 14:39
If you want a little bit of transparency on the background of the #wrapper, try use rgba() instead of solid color. — ed1nh0
– ed1nh0, Commented Apr 23, 2014 at 17:48

PatrikAkerstrand · Accepted Answer · 2011-02-10 14:39:30Z

6

Opacity is always inherited by descendant elements. There are no way to avoid it, and it isn't due to jQuery, but the way opacity works.

answered Feb 10, 2011 at 14:39

PatrikAkerstrand

45.8k12 gold badges82 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dotty · Accepted Answer · 2011-02-10 16:56:44Z

1

Clone the element (and children) and get the offsets. Then in the original element, hide all the inner elements. Now set the opacity. With the cloned element, place it on top of the original element (using position and the offsets), but this time hide the background to the cloned element.

answered Feb 10, 2011 at 16:56

dotty

41.7k67 gold badges155 silver badges197 bronze badges

Collectives™ on Stack Overflow

jQuery("#wrapper").css({ opacity: 0.5 })

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related