2

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.

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
Seth Taddiken
  • 564
  • 1
  • 5
  • 18
  • Why you want `opacity` to be `0.5`? background? The solution is set the opacity to the child elements, except for the `iframe`. – dashtinejad Aug 31 '14 at 05:11
  • possible duplicate of [Set opacity of background image without affecting child elements](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) –  Aug 31 '14 at 05:58

2 Answers2

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.
dashtinejad
  • 6,127
  • 3
  • 26
  • 43
  • Here is a jsFiddle demonstrating the rgba mentioned above. http://jsfiddle.net/z85fgupu/ Notice the black background is 0.5 opacity due to the a or alpha setting of rgba() – im_brian_d Aug 31 '14 at 05:26
  • 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? – Seth Taddiken Aug 31 '14 at 05:30
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

frogatto
  • 27,475
  • 10
  • 76
  • 119