Is Opacity Is Inherited in a Div

Is Opacity is INHERITED in a div

Like fmsf says, it's not possible.
If you're looking for a way to make background-color or color transparent, you could try rgba. This is not supported in IE6.

#my_element {
  /* ie6 fallback - no opacity */
  background-color:rgb(255, 255, 255);

  /* rgba(red, green, blue, alpha); */
  background-color:rgba(255,255,255,0.5);
}

Child element inheriting parent's opacity

Use the rgba() color method instead of opacity:

div.background {  background: url(klematis.jpg) repeat;  border: 2px solid black;}div.transbox {  margin: 30px;  background-color: rgba(255, 255, 255, 0.6);  border: 1px solid black;}div.transbox p {  margin: 5%;  font-weight: bold;  color: #000000;}

<div class="background">  <div class="transbox">    <p>This is some text that is placed in the transparent box.</p>    <input type="button" value="Ok">  </div></div>

Remove inheritance of opacity from parent?

You cannot stop children elements from inheriting their parent's opacity.

Instead, you could use an rgba value for the parent's background color instead of opacity:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(0,0,0,0.5);
}

See this SO question for more info.

My child div's opacity keeps inheriting from its parent. How can I stop that behavior?

While you can't use opacity to make a descendant element more opaque than the parent, you can use rgba coloring to do what you want:

.box {
    background-color: rgba(0, 0, 0, .5);
    height: 60px;
    min-width: 100%;
}
#icon-menu {
    background-color: rgba(0, 0, 0, 1);
    padding-left: 75px;
    position: fixed;
    color: #ffffff;
    font-size: 40px;
}

jsFiddle example

How to set opacity in parent div and not affect in child div?

May be it's good if you define your background-image in the :after pseudo class. Write like this:

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

Check this fiddle

child div not to inherit parent opacity

Here, I made a quick sample based on my original reco of absolute positioning:

http://jsfiddle.net/Bbw7r/5/

Not much complexity for you to work around.

<div class="notice_container handle" id="showMe"></div>
<div class="notice handle">some notice!</div>

$('.handle').show().delay(500).fadeTo('slow', 0.7);

(delay is just to let you see what's happening)

Updated: I missed the queue:

$('.handle').show().animate({opacity: .7}, {queue: false, duration: 1200});
$('.notice').animate({opacity: 1}, {queue: false, duration: 1200});

CSS opacity to parent not to childs

You can use css3 background-color:rgba(122,122,0,0.5); the last value is the opacity, and it dont force the child elements to get it.

CSS3 Opacity inheritance

It depends on the image size of "../Images/glass.jpg" but the simplest and most cross-browser way probably would be to convert this image to semi-transparent png-image.

Another, not so clean and cross-browser way (not working in ie6 and ie7) would be to use :before pseudoclass.

Example code: http://jsfiddle.net/ZXDvc/

---

Related Topics