我不知道您尝试了什么，但是类似这样的操作是否有效？请确保将位置设置为absolute。

img {
  width: 400px;
  height: 400px;
  position: absolute;
}

img:nth-child(2) {
  margin-left: 200px;
}

<img src="https://htmlcolorcodes.com/assets/images/colors/black-color-solid-background-1920x1080.png" />
<img src="https://htmlcolorcodes.com/assets/images/colors/red-color-solid-background-1920x1080.png" />

你需要html中的图像和父对象上的背景设置。需要相对位置以便能够在div中的img上使用绝对位置。你可以在css中更改img的不透明度。如果你想更改顺序，你可以使用z-index。
如果你不想使用background-image，你可以把两个img都放在html里面。

//html
<div>
  <img src="https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true"></img>
</div>
// css
div{
  width:500px;
  height:500px;
  margin:0 auto;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png");
  position:relative;
}
img{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.5;
}