How to apply an opacity without affecting a child element with html/css?

Question

I want to achieve this using html and css:

I have tried to set the opacity of the container

Answer 1

You can use opacity in combination with background color, like this:

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

    containter text
    

        box text
    

​Live demo