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

Use such elements that you can add :before or :after. My solution

    

         Inside of container element is not effected by opacity. 
    

Css.

.container{
    position: relative;
}

.container::before{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000000;
    opacity: .25
}