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;
}

由于其他原因，容器必须具有绝对位置。

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;
}