Question

我正在尝试在堆叠在另一张图像上方的图像上叠加div（或跨度）。两个图像都居中并缩放以适合。我的图像的高度比宽度高，但是尺寸不固定。我希望div完全适合 higherImg （即即使发生缩放也具有与 higherImg 相同的尺寸和位置）。

我是CSS的初学者，所以我所能管理的就是像这样堆叠图像：

.imgbox {
  text-align: center;
  position: relative;
}

.lowerImg {
  max-width: 100%;
  max-height: 85vh;
  z-index: 3;
}

.higherImg {
  max-width: 100%;
  max-height: 60vh;
  padding-right: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.topDiv {
  background: $pink-color;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  position: absolute;
  padding-right: 5px;
  transition: opacity .5s;
  z-index: 10;
  cursor: crosshair;
}

<div>
  <div class="imgbox">
    <img class="lowerImg" />
    <img class="higherImg" />
    <div class="topDiv"></div>
  </div>
</div>

Answer 1

如果我对ti的理解正确，则您希望div和img相互堆叠：

像这样吗？

.imgbox {
  text-align: center;
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: red;
  cursor: default;
}

.topDiv {
  height: 50%;
  width: 50%;
  opacity: 0.8;
  position: absolute;
  border: 2px solid red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lowerImg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border: 1px solid black;
  max-height: 100%;
  max-width: 100%;
  cursor: default;
}

.higherImg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  max-width: 90%;
  max-height: 90%;
  border: 1px solid red;
  cursor: default;
  transition: opacity .8s;
  cursor: crosshair;
}

<div>
  <div class="imgbox">
    <div class="topDiv">
      <img class="lowerImg" src="http://placekitten.com/301/301" />
      <img class="higherImg" src="http://placekitten.com/201/201" />
    </div>
  </div>
</div>

将Div叠加在居中图像上方

1 个答案: