JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
    <div id="id">
        image: <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/White_falcon.jpg/100px-White_falcon.jpg"/>
    </div>
</div>

CSS

#bg {
  width: 250px;
  height: 250px;
  background-color: yellow;    
}

#id {
  width: 200px;
  height: 162px;
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/White_falcon.jpg/200px-White_falcon.jpg');
  opacity: 0.3;
  z-index: -1;
}