影響孩子的div容器的不透明度

Question

我有一個背景和不透明度設置的容器。其中，我有一個孩子。我希望孩子出現在容器的頂部，但不是，不透明會影響孩子。

這裏的HTML

<div class="container"> 
    <div class="child">some label</div> 
</div> 

和CSS：

.container { 
    position: absolute; 
    top: 0; 
    width: 200px; 
    height: 200px; 
    opacity: 0.5; 
    background-color: lightblue; 
    z-index: 10; 

}

.child { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

其他原因，容器必須有一個PO絕對的。

jsfiddle是here。

如何避免影響孩子的容器的不透明度？

Answer 1

.container { 
    position: absolute; 
    top: 0; 
    width: 200px; 
    height: 200px; 
    //opacity: 0.5; 
    background-color: rgba(173,216,230,0.5); 
    z-index: 10; 
}