HTML/CSS で子要素に影響を与えずに不透明度を適用するにはどうすればよいでしょうか? 質問する

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>