Disable Opacity on Child Element When Parent Element Has Opacity

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

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>

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.

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

---

Related Topics