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

希望这对您有所帮助。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .image-container {
            position: relative;
            display: inline-block;  
        }
        .image-overlay {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="image-container">
      <img class="image-content"  src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
      <img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
    </div>
</body>

Answer 2

原因

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

如何修复

对每个视口/设备使用媒体查询（@media）。

或

相对于容器absolute放置重叠图像#test的位置。我已经使用这种方法来达到目的。您可以看一下正在工作的小提琴。

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

使用引导程序4在html中的另一个图像上覆盖图像

2 个答案: