javascript - 使用 bootstrap 4 在 html 中的另一个图像上叠加图像

Question

我想将图像叠加在另一幅图像上并更改它的像素(位置)。 我搜索谷歌并写了这段代码:

.background {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(440px, 340px);
  z-index: 2;
}

<div class="container-fluid">
  <div class="row" style="margin-top:10px;">
    <div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10  " id="test">
      <img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
      <img src="static/overlay.png" id="overlay2" class="overlay">
    </div>

这段代码给了我想要的结果，但问题是当我调整页面大小时，图像覆盖从背景图像中消失了。 我想保留它们之间的比例。

Answer 1

原因

图像叠加层没有响应的原因是您为 transform 指定了特定值 translate(440px, 340px) 并且这适用于所有设备。

如何修复

对每个视口(viewport)/设备使用媒体查询 (@media)。

或

相对于它的容器#test 使叠加图像绝对 位置。 我已经使用这种方法来实现结果。你可以看看工作中的 fiddle 。

链接:https://jsfiddle.net/Baliga/fme12tby/22/