How can I cancel the opacity of a child div?

Question

I have a div here with a button:

Menu with semi-opaque button

I want the contents of the div to be opaque while still keeping the semi-opaque background color.

The box will contain a menu.

#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px; 
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;

}
div.calcMenuContents {
opacity: 1;
}

The Run button is contained within the calcMenuContents div:

<div id="calculationMenu">
<div id="calcMenuContents">

    <button onclick="runCalculations(2)" class="insideMenu">Run</button> 

</div>
</div>

How may I make it so that the calcMenuContents are not semi-transparent?

Update: Thank you, BoltClock for the alternate solution (to set specific attributes of a div, instead of for the entire div). My only issue is that the parent

Fixed menu

See my answer to this question: http://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css — Jerska, Nov 11 '13 at 14:27

score 4 · Accepted Answer · answered Nov 11 '13 at 14:25

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

It worked, thank you! My menu is beautiful now. I see how that works now. — Austin Burk, Nov 11 '13 at 14:28

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

There is a solution! Use rgba background values and you can have transparency wherever you want :

#calculationMenu
{
    background: rgba(0, 0, 0, 0.4);
    /*opacity: 0.4;*/
    padding: 20px;
}

div.calcMenuContents
{
    background: rgba(255, 0, 0, 1);
    /*opacity: 1;*/
}

http://jsfiddle.net/Kyle_Sevenoaks/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_Sevenoaks/TK8Lq/2/

use rgba()

score 2 · Answer 3 · answered Nov 11 '13 at 14:28

2

you can change the background-color into an RGBA, so you would get:

background-color: rgba(106, 166, 217, 0.4);

If I'm right

answered Nov 11 '13 at 14:28

Johan

361
2
7
16

score 2 · Answer 4 · answered Nov 11 '13 at 14:28

2

You can't change the opacity of child elements. Try to use semi-transparent .png image as background of "calculationMenu" div instead of solid color background and opacity.

answered Nov 11 '13 at 14:28

Avik Das

101
2
8

How can I cancel the opacity of a child div?

4 Answers4