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.
How can I cancel the opacity of a child div?
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with rgba() values based on the opacity you had given it, and remove the opacity declarations altogether:
#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
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.
Resetting the opacity of a child element - Maple Browser (Samsung TV App)
The problem you probably have (based on looking at your selectors) is that opacity affects all child elements of a parent:
div
{
background: #000;
opacity: .4;
padding: 20px;
}
p
{
background: #f00;
opacity: 1;
}
http://jsfiddle.net/Kyle_/TK8Lq/
But there is a solution! Use rgba background values and you can have transparency wherever you want :)
div
{
background: rgba(0, 0, 0, 0.4);
/*opacity: .4;*/
padding: 20px;
}
p
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_/TK8Lq/2/
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 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>How can I cancel the opacity of a child div?
You can't really cancel out a parent element's opacity, but if the only parts of the parent element that will be semi-transparent are its background and its border, you can replace their hex colors with
rgba()values based on the opacity you had given it, and remove theopacitydeclarations altogether:#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px;
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
Related Topics
Changing the Width of Bootstrap Popover
Css3 Transition - Fade Out Effect
Stylesheet Not Updating When I Refresh My Site
How to Horizontally Align My Divs
How to Target Elements with an Attribute That Has Any Value in CSS
Html, CSS - Weird Invisible Margin Below Pictures
How to Keep Wrapped Flex-Items the Same Width as the Elements on the Previous Row
Greyscale Background CSS Images
@Font-Face Src: Local - How to Use the Local Font If the User Already Has It
Css: Styled a Checkbox to Look Like a Button, Is There a Hover
CSS Endless Rotation Animation