如何让div完全覆盖整张图片？CSS布局问题求助

算力阿峰

2026-5-6

解决图片上方半透明遮罩无法贴合的问题

嘿，我来帮你搞定这个问题！你现在的核心问题有两个：一是半透明遮罩的容器层级不对，二是高度设置得太夸张（200vh肯定会超出图片范围）。咱们一步步调整：

问题分析

你的.cover没有放在.old这个相对定位的容器里，所以它的absolute定位是相对于整个页面，而不是图片容器
height:200vh会让遮罩高度是视口的两倍，远远超过图片实际高度

修正后的代码

HTML结构

<div class="old">
  <div class="cover"></div>
  <img src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

CSS样式

.old {
  position: relative;
  display: inline-block; /* 让容器宽度自适应图片，避免默认div占满整行；若需要图片占满父容器，可去掉该属性 */
}
.cover {
  background-color: blue;
  width: 100%;
  height: 100%; /* 高度与图片容器完全匹配 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.5;
}