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>

- John Smith

---

ID需要是唯一的... - dsgriffin

可能是重复的问题：如何使用CSS使背景DIV仅透明。 - dsgriffin

你不能这样做。子元素会继承不透明度设置。 - Turnip

请看这里：http://jsfiddle.net/JoshC/HP5vc/ - Josh Crozier

Answer 1

尝试使用background-color: rgba(255,255,255,0.7);而不添加透明度或过滤器，这样可以使背景透明但不影响元素的内容。

- kyledavide

---

我不知道为什么他没有将这个作为答案，但它对我起作用了，谢谢！ - hjavaher

谢谢你的回答，也帮助了我。 - Janatbek Orozaly

最好能够详细说明答案，不清楚您所指的元素是哪些。 - gene b.

方便的十六进制转RGB转换器，可从所需的Hex背景颜色生成RGB https://www.webfx.com/web-design/hex-to-rgb/ - 虽然有很多这样的工具，但这个可以全屏显示颜色，让您评估背景叠加颜色的效果。优雅简洁的解决方案。 - Steve

Answer 2

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

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

background-color: #5D5C61;

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

background-color: #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;
}

- Mick