0

i have a div with opacity set to 0.8 and inside that div i have an iframe. i don't want the iframe to be transparent at all (i.e. opacity 1.0).

markup:

 <div id="container">
  some text and images
  <iframe width="500" height="370" src="http://www.youtube.com/embed/'+videoId+'" frameborder="0" allowfullscreen></iframe>
</div>

css:

 #container{ 
   opacity: 0.8;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
 }

i tried resetting the opacity to 1.0 but it doesn't work!, i would appreciate any help...

also, is this the best method to set the opacity (cross-browser compatibility wise)

excentris
  • 471
  • 1
  • 7
  • 25
Firezilla12
  • 110
  • 1
  • 8
  • 1
    possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) – Quentin Apr 15 '13 at 18:46

2 Answers2

1

That's not possible; when you set opacity, it applies to all child elements. You might be able to achieve what you want by setting the background color to rgba(0, 0, 0, 0.8), or something like that.

EDIT: Sorry, I misread and missed that you already had opacity: 0.8 in there as well as the MS-specific code.

crimson_penguin
  • 2,728
  • 1
  • 17
  • 24
0

The solution is to be more specific in your selector. Leave the div at the default opacity (1), and instead target more specifically the items in the div that should have opacity. So like: 

#container p, #container img {
   opacity: 0.8;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ArleyM
  • 855
  • 5
  • 15
  • 1
    Thanks, this could do the trick but i'm interested in making the div background transparent! using {background-color: rgba(254,253,252,0.9)} is exactly what after... – Firezilla12 Apr 15 '13 at 18:57