```css
#parent{
  background: rgba(0,0,0,0.4)
}

img{
  margin: 0 auto;
  display: block;
  position: relative;
  width: auto;
  max-width: 100%;
}
```

```html
<div id="parent">
<div>I am text</div>
<div>
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>
<div>
```

As you can see, the image is not gettin overlaid although its parent has rgba opacity set. However, I would like the images to have same overlay as the parent. How do I overcome this? (I need IE 10, 11 compatibility)