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
How to Set the Height of Vuetify Card
Footer At Bottom of Page or Content, Whichever Is Lower
Why Can't an Element With a Z-Index Value Cover Its Child
In Rc.1 Some Styles Can't Be Added Using Binding Syntax
How to Make Twitter Bootstrap Menu Dropdown on Hover Rather Than Click
How to Reference Jsf Image Resource as CSS Background Image Url
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements
Css Property Border-Color Not Working
Which CSS Properties Create a Stacking Context
Fullcalendar: Change the Color for Specific Days
How to Override Vuetify Styles
How to Get Div Height to Auto-Adjust to Background Size
Transitions on the CSS Display Property
Use Css3 Transitions With Gradient Backgrounds
Are Eot, Ttf, and Svg Still Necessary in the Font-Face Declaration