html - 如何为嵌套元素添加不同的不透明度？

Question

我在 HTML 中有两个嵌套元素，我想给包装一个不透明度 0.8，其中一个不透明度 1。
我想我明白为什么它不起作用，但是，我怎样才能模仿那种效果？
这是显示问题的简化 HTML，我希望绿色方 block 是实心的。

<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/