在CSS Grid中实现子Div匹配父容器尺寸并叠加显示

核心修改点 #

• 给.container添加position: relative，让绝对定位的覆盖层以容器为基准
• 调整图片尺寸，确保填满容器
• 添加悬停过渡动画

修改后的完整代码 #

CSS代码

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 55vh;
  background-color: #eef7e4;
  overflow: hidden;
}
.container {
  align-items: center;
  display: flex;
  overflow: hidden;
  position: relative; /* 关键：让子元素绝对定位以当前容器为基准 */
}
.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e32827;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease; /* 平滑过渡动画 */
}
/* 鼠标悬停时显示覆盖层 */
.container:hover .overlay {
  opacity: 0.8;
}

HTML代码

<div class="wrapper">
     <div class="container">
        <img class="image" src="imagefile.jpg">
        <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
        <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
        <div class="overlay"></div>
     </div>
     <div class="container">
        <img class="image" src="imagefile.jpg">
        <div class="overlay"></div>
     </div>
</div>

问题原因说明 #

1. 覆盖层尺寸不匹配：原来的.container没有设置position: relative，绝对定位的.overlay会以视口（body）为参考，所以width:100%和height:100%会铺满整个屏幕，而非父容器。添加position: relative后，覆盖层的定位基准变为.container，尺寸自然匹配容器。
2. 位置偏移：同样因为定位基准错误，除了右上角的容器刚好和视口右上角对齐外，其他容器的覆盖层都会以视口左上角为起点，导致偏移。设置position: relative后，覆盖层会以每个.container的左上角为起点，位置完全贴合容器。

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