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

【问题标题】：How can I cancel the opacity of a child div?如何取消子 div 的不透明度？
【发布时间】：2013-11-23 09:22:39
【问题描述】：

我这里有一个带按钮的 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）。我唯一的问题是父母

【问题讨论】：

使用rgba() 颜色：css3.info/preview/rgba
查看我对这个问题的回答：stackoverflow.com/questions/11807286/…
我认为您提交的编辑有点太早了...

标签： html css opacity

【解决方案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: rgba(255, 255, 255, 1);

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

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

使用rgba()

【讨论】：

【解决方案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);
}

【讨论】：

成功了，谢谢！我的菜单现在很漂亮。我现在知道它是如何工作的。

【解决方案3】：

您可以将背景颜色更改为 RGBA，这样您会得到：

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

如果我是对的

【讨论】：

【解决方案4】：

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

【讨论】：