Why can't child elements override the opacity of parent with a greater value?
I've never seen that as "overriding" or "underriding". It's a matter of relative opacities. If the parent has an opacity of 0.5, the child has it too (in relation to the parent's stacking context). The child can have its own opacity value between 0 and 1, but it will always be relative to the parent's opacity. So if the child also has opacity: 0.5 set, it will be 0.25 the opacity of some of the parent's sibling with opacity 1.
The spec treats it as an alpha mask, where opacity can only be removed. An element is either opaque, or has some degree of transparency (anything < 1):
Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
and later on:
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is
<alphavalue>
As for why it was implemented that way, I don't think it was intentional in the sense of "let's forbid that". Maybe this approach was chosen for being simpler to calculate, and only later an actual need for something different was recognized (then rgba color and background-color were introduced – and I may be wrong about the timeline here).
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
Disable opacity on child element when parent element has opacity
Solved this problem by changing it to the following:
<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
Content ...
<img src="..." alt="Photo" />
</div>
Used just rgba alpha instead of opacity.
Now it works.
How can a child override the opacity of the parent?
Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).
body { margin: 0;}
div.navbar { height: 100vh; /* IMPORTANT BITS: - ADDED image and gradient to navbar background and - REMOVED opacity THE REST: The rest was just to make the demo look better/simpler */ background: linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)), url(http://placeimg.com/1000/600/arch) no-repeat center; background-size: cover;
position: relative; }
.logo-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25%; height: 0; padding-top: 25%; border:25px solid #f2f2f2; border-radius: 50%; overflow: hidden;}.logo { width: 90%; border-radius: 50%; position: absolute; top: 5%; left: 5%;}<html><head><link rel="stylesheet" href="css.css"></head><body> <div class="navbar"> <div class="logo-wrapper"> <img class="logo" src="http://placeimg.com/200/200/tech/grayscale"> </div> </div></body></html>Child div doesn't override Parent
It's because opacity works for whole element of x. So if you have multiple nested elements, then it's opacity is added up. Means x set opacity for itself, then y sets opacity to itself and so on, it's not inherited by child elements:
span {
background-color: red;
}
div {
opacity: 0.9;
}<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<span>SPAN TEXT with 8 parents</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<span>SPAN TEXT with 1 parent</span>
</div>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 apply an opacity without affecting a child element with html/css?
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
Related Topics
Fade Image to Transparent Like a Gradient
Background-Size with Svg Squished in IE9-10
Background Images: How to Fill Whole Div If Image Is Small and Vice Versa
CSS @Font-Face Not Working in IE8
How to Reverse the Order of Columns in Bootstrap 4
iPhone Web App - Stop Body Scrolling
Chrome Renders Colours Differently from Safari and Firefox
Add Ellipses to Overflowing Text in Svg
Css: Are View Height (Vh) and View Width (Vw) Units Widely Supported
Changing an Input's HTML5 Placeholder Color with CSS Does Not Work on Chrome
Word-Wrap:Break-Word Not Working in IE8
CSS Display: Table Min-Height Not Working
Comma in CSS, Multiple Selectors Using the Same CSS
How to Change <Input Type="File"> Style
Responsive Clip-Path with Inline Svg
(Really) Long Background Image Does Not Render on iPad Safari
Twitter's Bootstrap 3 Grid, Changing Breakpoint and Removing Padding