Question

这是我到目前为止所尝试的：

HTML：

<div class="container">
  <a href="Game%20Page.htm" title="Game Page">

  <img src="Images/green-circle-hi.png" alt="Green" class="image 1" style="width: 400px": height="400px"></a>
  <div class="overlay">
  </div>

  <img src="Images/amber-clipart-face-15.png" alt="Amber" class="image 2" style="width: 400px": height="400px">
  <div class="AmberOverlay">
  </div>
</div>

CSS：

.container {
   position: relative;
   width: 28%;
}

.overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   transition: .5s ease;
   background-image: url(Images/Green%20circle%20Overlay.jpg);
   background-size: cover;
   border-radius: 50%;
}
.container:hover .overlay {
   opacity: 1;
}

.container {
   position:absolute;
   width: 28%;
}

.AmberOverlay {
   position:absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   transition: .5s ease;
   background-image: url(Images/Green%20circle%20Overlay.jpg);
   background-size: cover;
   border-radius: 50%;
}
.Amber:hover .AmberOverlay {
   opacity: 1;
}

我想让图像位于同一水平线上，并为所有图像分别叠加，我如何更改或添加此代码才能实现？

Answer 1

您需要将每个图像叠加对包装在div中并使该div为position: relative，然后叠加层为position: absolute，并且可以拉伸到图像设置的父级大小。

<div class="box">
  <img src="Images/green-circle-hi.png" alt="Green" class="image 1" style="width: 400px": height="400px"></a>
  <div class="overlay"></div>
</div>

<div class="box">
  <img src="Images/amber-clipart-face-15.png" alt="Amber" class="image 2" style="width: 400px": height="400px">
  <div class="AmberOverlay"></div>
</div>

在你的css中：

.box {
  postion: realtive;
}

.overlay, .AmberOverlay { 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

我在jsfiddle中创建了一个示例，因此您可以看到结果：https://jsfiddle.net/hpkc04kn/。

如何让我的图像水平显示并且所有图像都叠加？

1 个答案: