如何取消子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背景值，您可以在任何地方拥有透明度：

#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()

Answer 2

您无法真正取消父元素的不透明度，但如果父元素中仅半透明的部分是其背景及其边框，则可以使用rgba()值替换其十六进制颜色基于您提供的不透明度，并完全删除opacity声明：

#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，这样您就可以获得：

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

如果我正确

Answer 4

您无法更改子元素的不透明度。尝试使用半透明的.png图像作为“calculationMenu”div的背景，而不是纯色背景和不透明度。