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

If you have to use an image as the transparent background, you might be able to work around it using a pseudo element:

html

 
   
I have 100% opacity
  

css

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}