如何为嵌套项添加不同的不透明度？

Question

我在HTML中有两个嵌套项目，我想给出一个不透明度为0.8的不透明度和一个不透明度为1的内容。
我想我明白为什么它不起作用，但是，我怎么能模仿这种效果呢？
这是一个简化的HTML，显示问题，我希望绿色方块是实心的。

<div style='background-color:red;
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: absolute;
            top:0;
            left:0;
            opacity:0.8'>

    <div style='width:150px; height:150px; background-color:green; opacity:1'>
      Some content
    </div>
</div>

Answer 1

如果使用rgba CSS属性而不是opacity属性，则可以实现以下目的：

<div style='background-color:rgba(0, 255, 0, 0.8) ;width: 500px; height: 500px; border: 1px solid black; position: absolute; top: 0; left: 0'>
<div style='position: relative; width: 150px; height: 150px; background-color: rgba(0, 0, 255, 1);'>aaaaaaaaa<br>aaaaaaaaa<br></div>
</div>

演示： http ： //jsfiddle.net/ScHgC/

Answer 2

你总是可以拥抱渐进增强，并在背景颜色上使用rgba

// this will only affect the div it's applied to and not it's contents
background-color: rgba(0,0,0,0.8)

Answer 3

使用CSS2

我为你准备了一个演示了一个关键概念的演示：

http://jsfiddle.net/audetwebdesign/pN69F/

您可以首先添加一个wrapper div来定位两个封闭的div， outer和inner 。 outer位于inner之前，这意味着inner将位于outer （除非您调整z-index值）。

您可以将不透明度设置为outer div，这将允许任何背景文本或图像部分可见。 将inner div的不透明度设置为1.0以获得完全饱和的着色。

我认为大多数浏览器都支持不透明度，但请查看http://www.quirksmode.org/css/opacity.html以获取特定于供应商的CSS属性以处理IE怪癖。