I Do Not Want to Inherit the Child Opacity from the Parent in Css

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

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

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.

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>

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

how to cancel opacity for a child element?

The opacity of the child will always be the opacity of the parent if the opacity of the child is 1.

This is not a problem with inheritance, but rather with the way opacity is calculated.

For instance,

<div id="parent">
<div></div>
</div>

<div id="original">
</div>

<div id="quarter">
</div>

#parent div, #quarter {
width: 100px;
height: 100px;
background-color: orange;
}

#parent div {
opacity: 0.5;
}

#parent {
opacity: 0.5;
}

#quarter {
opacity: 0.25;
}

#quarter's opacity, from your perspective, is the same as that of #parent div, but in actual fact, #parent div has twice the opacity of #quarter. See this jsfiddle for more detail: http://jsfiddle.net/HUaNm/


The only way to avoid this is to move the child out of the parent. Alternatively, depending on what you want here, you can also use rgba colors for the background/border/font color of the parent instead of opacity, but the effect is not the same as applying opacity.



Related Topics



Leave a reply



Submit