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

This was answered here: http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements — shaunsantacruz, Mar 15 '12 at 14:25
thanks for that link.. man i am quite bummed that there is no definitive ignore method or something. ill have to try something else.. thanks a lot for those resources — legendary_rob, Mar 15 '12 at 14:39
possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Adriano, Feb 27 '14 at 08:35

score 7 · Answer 1 · answered Mar 15 '12 at 14:23

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

score 4 · Accepted Answer · answered Mar 15 '12 at 14:28

4

You can use css3 rgba property for this & for IE you can use IE filter.Write 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;
    }

answered Mar 15 '12 at 14:28

sandeep

91,313
23
137
155

will that work with ie. 8 browsers though. our clients are huge so we dont know what type of browsers to expect – legendary_rob Mar 15 '12 at 14:34
it's work in all browsers accept IE BUT for this you can use IE filter for this. you can generate you filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ – sandeep Mar 15 '12 at 14:37

CSS transparency issues in nested elements

2 Answers2

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