CODEWITHSUNDEEP
htmlcssnestedopacity
legendary_rob
legendary_rob

Reputation: 13012

CSS transparency issues in nested elements

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

Upvotes: 4

Views: 3365

Answers (2)

sandeep
sandeep

Reputation: 92793

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

Upvotes: 4

Rob W
Rob W

Reputation: 349012

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:

Upvotes: 7

Related Questions