Style the Opacity of an Element Without Styling Child Element

Question

I have a <div> tag that I have styled to have opacity: 0.5;. Within that <div> tag I have an <iframe> that I don't want to have 50% opacity. I'm wondering if there's any way to style the <div> element and exclude the <iframe> element that is inside the <div> element.

Why you want opacity to be 0.5? background? The solution is set the opacity to the child elements, except for the iframe. — dashtinejad
– dashtinejad, Commented Aug 31, 2014 at 5:11
possible duplicate of Set opacity of background image without affecting child elements — user663031
– user663031, Commented Aug 31, 2014 at 5:58

dashtinejad · Accepted Answer · 2014-08-31 05:17:00Z

4

Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent. So:

Set the opacity to the child elements, except for iframe.
If you have some transparent background in your parent, use rgba or transparent png.

answered Aug 31, 2014 at 5:17

dashtinejad

6,2734 gold badges32 silver badges46 bronze badges

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

2 Comments

Brian Dillingham Over a year ago

Here is a jsFiddle demonstrating the rgba mentioned above. jsfiddle.net/z85fgupu Notice the black background is 0.5 opacity due to the a or alpha setting of rgba()

sethtadd Over a year ago

So then how do I add the same background color(with 50% opacity) as the other elements to the iframe(it has a border)? EDIT: Didn't realize, if I use rgba it doesn't effect the iframe does it?

frogatto · Accepted Answer · 2014-08-31 05:51:24Z

1

As @ROX stated you can't. In my opinion setting opacity to other child elements can be good choice. Try this:

.your_div *:not(iframe) { opacity: 0.5; }

Another option would be using a wrapper with relative position and all other elements with absolute position inside that wrapper. JSFiddle

edited Aug 31, 2014 at 5:51

answered Aug 31, 2014 at 5:34

frogatto

29.4k13 gold badges90 silver badges137 bronze badges

3 Comments

sethtadd Over a year ago

This didn't seem to work for me, I tried it earlier, but thanks!

frogatto Over a year ago

@SethTaddiken I've added another option, please see it

sethtadd Over a year ago

Thanks, that would work but personally I would rather use an rgba value as a background color.

Collectives™ on Stack Overflow

Style the Opacity of an Element Without Styling Child Element

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related