CSS div不透明度仅在外部div上

Question

我有两个div，外部div和内部div。我有一个背景图像，外部div有一个不透明度集，但我似乎无法让内部div不继承外部div的不透明度。我希望内部div是纯色。

我的代码在下面，这里有一个jsfiddle：http://jsfiddle.net/3TK3U/

<style type="text/css">
body
{
background-image:url('http://media-bubble.info/images/layout/background.png');
}
.outsideBox {
    width:70%;
    height:200px;
    background-color: #ffffff;
    opacity:0.7; 
    filter:alpha(opacity=70);
    text-align:center;
}
.insideBox {
    width:40%;
    height:80px;
    background-color: #999;
    z-index:999999;
}
</style>

<div id="Introduction" class="outsideBox">
    <div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div>
</div>

Answer 1

尝试使用background-color: rgba(255,255,255,0.7);没有使背景透明但不影响元素内容的不透明度或滤镜。

Answer 2

这是一个老问题，但仍然会出现在搜索中，因此更新强调您也可以使用十六进制颜色值设置不透明度（不确定这是何时引入的，也不确定跨浏览器的兼容性有多远）。

例如，如果你有这样的背景颜色：

背景颜色：#5D5C61；

您可以通过在末尾添加两个十六进制数字来设置不透明度：

背景颜色：#5D5C61F5；

范围为00（完全透明）到（FF）。

如果你不想在页面或应用程序中转换，它可以避免转换为RGB。

.outsidebox {
  //Add your other properties as needed
  background-color: #5D5C61F5;
}
.insidebox {
  //No opactity needed here if you don't
  //want it transparent.
  //Add your other properties as needed
  background-color: #1F2833;
}