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
  • 700,868
  • 160
  • 1,392
  • 1,356
Seth Taddiken
  • 574
  • 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,193
  • 4
  • 28
  • 44
  • 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() – Brian Dillingham 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
  • 28,539
  • 11
  • 83
  • 129