CSS实现图片遮挡效果：使用div块覆盖图片 | 前端技巧

.container {
  position: relative;
}
.overlay1, .overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}
.overlay2 {
  top: 50%;
  z-index: 2;
}

在上述代码中，父容器的position属性设置为relative，使得其成为两个div块的相对定位容器。两个div块分别设置了position属性为absolute，top和left属性为0，使其覆盖在图片上方。通过设置z-index属性，overlay2会覆盖在overlay1上方。

这样，当滚动页面时，两个div块会始终遮挡图片。