I do not want to inherit the child opacity from the parent in CSS

Question

I do not want to inherit the child opacity from the parent in CSS.

I have one div which is the parent, and I have another div inside the first div which is the child

Answer 1

There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:

and css:

div.parent > div:not(.child1){
    opacity: 0.5;
}

In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters