实现div层背景半透明而内容不透明的效果的注意点

今天在写div层背景半透明而内容不透明的效果的时候发现了要注意的地方，DOM结构大概是这样的
<pre><div class="contain">
<div class="test"></div>
</div>
</pre>

希望的效果是外面的div为黑色半透明，而里面的div不受影响，但是当我设置了以下样式时，test里面的内容还是半透明的。
<pre>
.contain {
background:#000;
opacity:0.5;
}
.test{
opacity:1;
}
</pre>

这时，改变一下设置的方法就可以达到想要的效果：
<pre>
.contain {
background: rgba(0,0,0,0.5);
}
</pre>
这样就不会影响到div里面的内容了。