How to Remove Parent Opacity 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

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/

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 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.

Remove inheritance of opacity from parent?

You cannot stop children elements from inheriting their parent's opacity.

Instead, you could use an rgba value for the parent's background color instead of opacity:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(0,0,0,0.5);
}

See this SO question for more info.

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