html - 如何取消子 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 的背景，而不是纯色背景和不透明度。