CODEWITHSUNDEEP
htmlcssiframe
Firezilla12
Firezilla12

Reputation: 110

non transparent iframe inside transparent div

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)

Upvotes: 0

Views: 870

Answers (2)

ArleyM
ArleyM

Reputation: 853

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);
}

Upvotes: 0

crimson_penguin
crimson_penguin

Reputation: 2778

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.

Upvotes: 1

Related Questions