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

I have a div here with a button:

我在这里有一个带按钮的div:

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

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

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:

Run按钮包含在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?

我如何才能使calcMenuContents不是半透明的?

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

更新:感谢BoltClock的替代解决方案(设置div的特定属性,而不是整个div)。我唯一的问题是父母

4 个解决方案

#1

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:

你不能真正取消父元素的不透明度,但如果父元素的唯一部分是半透明的是它的背景和边框,你可以根据不透明度用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);
}

#2

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

有一个解决方案!使用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/

---

For text, you can just use the same rgba code, but set to the color property of CSS:

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

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.

但是你必须在所有东西上使用rgba才能工作,你必须删除所有父元素的不透明度。

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

use rgba()

#3

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.

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

#4

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

您可以将背景颜色更改为RGBA,这样您就可以获得:

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

If I'm right

如果我是对的