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
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>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>Can a child div have a higher opacity than parent with css?
Hi you can do as like this
You can define parent opicity
and child as like you
ex.
css
.parent{
padding:20px;
background:rgba(112,81,246,0.3);
}
.child{
padding:20px;
background:rgba(112,81,246,0.6);
}
HTML
<div class="parent">
<div class="child">Hello i m child</div>
</div>Live demo here http://jsfiddle.net/rohitazad/PC4sL/
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.
Related Topics
Can It Flexbox? Chat Window with Input at the Bottom, Chats Scrolling Up
Can the :Before and :After Pseudo-Elements Inherit Height from the Parent Element
Input Padding Cutting Out Text in Firefox
Internet Explorer - CSS Shadow All Around
Why Is My Bootstrap Code Not Working
How to Create Circle with Four Quarters
Angular Material 6 Grid List Align-Items and Justify-Content to Flex-Start
Media Query-Like Behaviour on Width of a Specific Div
Moodle Not Showing CSS and Theme with Linux Server
MVC CSS Not Rendering in Visual Studio When Debugging
Absolute Positioning and Its Parent Element
Css-Selector for When a HTML-Document Is Inside an Iframe
Add Padding Without Changing Overall Width
CSS - Removing Horizontal Space in List Menu Using Display: Inline Property
Css3 Flexbox Compatibility Problems with Firefox and Safari