CSS transparency issues in nested elements

Question

hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:

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

and the 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 was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?

thanks in advance :D

Answer 1

There is no way to make descendants ignore the parent's opacity.

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

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

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

See also:

• MDN: hsla colors
• MDN: rgba colors