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

Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.