CSS transparency issues in nested elements

Question

Hey, I wonder if any of you have a similar problem? I'm working on the advertising section of a web page, and I got a really cool background, which I would like to continue in the sections of the elements, so I have a box in which there is a box for RSS feeds in the updates made on the website, and then I have a box for advertising. here is my html:

<div class="side"> <div id="ad"> bla </div> <div id="rss_news"> double bla </div> </div> 

and css:

 .side { float: left; background-color: black; width: 300px; min-height: 710px; padding: 0 0 0 0px; margin-top: 25px; border: 1px solid white; border-radius: 8px 8px 8px 8px; opacity: 0.3; } #ad { border: 1px solid blue; height: 320px; max-height: 350px; margin: 15px; opacity: 1; } #rss_news { border: 1px solid yellow; height: 320px; max-height: 350px; margin: 15px; opacity: 1; } 

as you can see, and as I expected, the side class loses its attributes on the nested ones. is there a way that I could somehow tell other id tags to ignore this opacity?

in advance: D

Answer 1

You can use the css3 rgba property for this, and for IE you can use the IE filter . Write it like this:

  .side{ background-color: rgba(0,0,0, 0.5); background: transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/ zoom: 1; } 

Answer 2

There is no way to force descendants to ignore parent opacity .

You can use rgba / hsla colors to get a partially transparent background without affecting the visibility of children. Example:

 .side { background-color: rgba(0,0,0, 0.3); } 

Demo: http://jsfiddle.net/ywQy5/

See also:

• MDN: hsla colors
• MDN: rgba colors