新手求助：如何在单页多图片上实现独立Overlay效果？

嘿，我帮你看了下代码，问题出在你给图片加了position: fixed属性哦！

问题根源 #

fixed定位会让元素脱离正常的文档流，不再属于它的父容器.container了。这就导致你的.container实际上没有高度（因为里面的img被fixed“拎走”了），当你hover的时候，根本不是触发在图片对应的区域，自然Overlay就没法正确对应到各自的图片啦。

修复方案 #

我们把图片的fixed定位去掉，改用flex布局来让图片横向排列，同时保持.container的relative定位，这样Overlay就能牢牢和对应的图片绑定了。

下面是修改后的完整代码：

<html>
<head>
<style>
* { 
  background-color: #d7c2fc; 
  font-family: Courier New, monospace; 
  margin: 0; 
  padding: 0; 
}
#title { 
  text-align: center; 
  font-size: 50px; 
  margin: 20px 0; 
}
/* 新增flex容器实现图片横向整齐排列 */
.image-group {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.container { 
  position: relative; 
}
.image { 
  display: block; 
  width: 300px; 
  height: 250px; 
}
.overlay { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 100%; /* 改成自适应高度，不用写固定值 */
  width: 100%; /* 改成自适应宽度，不用写固定值 */
  opacity: 0; 
  transition: .5s ease; 
  background-color: #008CBA; 
}
.container:hover .overlay { opacity: 1; }
.text { 
  color: white; 
  font-size: 20px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  text-align: center; 
  background-color: #008CBA; 
}
</style>
</head>
<body>
<h1 id="title"> Why be Vegan?</h1> <!-- 修复了标题的错误写法：h1= "title" → id="title" -->
<div class="image-group">
<div class="container">
<img src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
<div class="overlay">
<div class="text">Animals</div>
</div>
</div>
<div class="container">
<img src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image" >
<div class="overlay">
<div class="text">Earth</div>
</div>
</div>
<div class="container">
<img src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
<div class="overlay">
<div class="text">Body</div>
</div>
</div>
</div>
</body>
</html>

关键修改点 #

• 移除了所有图片的position: fixed属性，让图片回到父容器的文档流中
• 新增image-group容器，用flex布局实现图片横向整齐排列，排版更美观
• 把.overlay的宽高改成100%，自动匹配图片尺寸，不用写固定数值
• 修复了标题的语法错误，确保标题能正确应用样式
• 给全局样式添加margin:0;padding:0，消除浏览器默认边距，排版更干净

这样修改后，每个Overlay就能精准对应各自的图片，hover的时候也能正常显示啦！

内容的提问来源于stack exchange，提问作者Bridget Kacprzyk