提问者:小点点

两个图像重叠不正确


但是正如你所看到的,输出并不完全是我想要的。 我想要两张图片在同一地方重叠,这样一张图片的一部分就会被另一张图片遮住

我的css代码-

.shamne {
  width: 50%;
  position: relative;
  top: 0;
  left: 0;
}

.pichone {
  width: 50%;
  position: absolute;
  top: 0px;
  left: 20px;
}

我的html代码-

<div class="col-md-3 col-lg-6 col-12 mb-4">
  <div>
    <img src="images/fake_m.png" class="shamne" />
    <img src="images/tamim1.png" class="pichone" />
  </div>
</div>


共1个答案

匿名用户

请尝试以下代码:

<div class="col-md-3 col-lg-6 col-12 mb-4">
 <div class="wrapper">
  <img src="images/fake_m.png" class="shamne" />
  <img src="images/tamim1.png" class="pichone" />
 </div>
</div>
.wrapper{
 width: 100%; 
 height: max-content;
 position: relative;
}
.shamne{
 width: 100%; 
 height: 100%;
 object-fit: cover;
}
.pichone{
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translate(-50%,0);
}