如何取消子 div 的不透明度？

Question

我这里有一个带有按钮的div：

我希望div的内容是不透明的，同时仍然保持半不透明的背景色。

该框将包含一个菜单。

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

“运行”按钮包含在calcMenuContents div中:

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

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

</div>
</div>

我怎样才能使calcMenuContents不是半透明的？

更新：谢谢 BoltClock 的替代解决方案（设置 div 的特定属性，而不是整个 div）。我唯一的问题是父母

Answer 1

您可以将背景颜色更改为RGBA，因此您将获得：

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

如果我是对的

Answer 2

您无法真正抵消父元素的不透明度，但是如果父元素中唯一半透明的部分是其背景和边框，则可以根据您赋予它的不透明度将其十六进制颜色替换为 rgba（） 值，并完全删除不透明度声明：

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

Answer 3

有一个解决方案！使用rgba背景值，您可以随时随地获得透明度：

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

对于文本，可以使用相同的rgba代码，但设置为CSS的color属性:

color: rgba(255, 255, 255, 1);

但是您必须在所有内容上使用rgba才能正常工作，您必须删除所有父元素的不透明度。

http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/

使用rgba（）