CSS实现4张背景图悬停定位问题：仅首图生效其余不显示

嘿，我来帮你解决这个问题！你遇到的核心问题应该是没给所有图片设置正确的定位和堆叠规则，导致它们被第一张图完全盖住了。下面是纯CSS的完整实现，完全符合你的需求：

第一步：HTML结构 #

我们需要一个父容器来承载四张图，所有图片元素都放在这个容器里：

<div class="image-container">
  <div class="bg-img img-1"></div>
  <div class="bg-img img-2"></div>
  <div class="bg-img img-3"></div>
  <div class="bg-img img-4"></div>
</div>

第二步：CSS样式实现 #

这部分是核心，我会详细标注每个属性的作用：

/* 父容器：设置相对定位，作为内部绝对定位元素的基准 */
.image-container {
  position: relative;
  width: 600px; /* 你可以根据需求调整容器宽高 */
  height: 400px;
  border: 2px solid #333;
  overflow: hidden; /* 防止图片悬停时超出容器范围 */
}

/* 所有背景图的通用样式：让它们初始完全重叠 */
.bg-img {
  position: absolute; /* 绝对定位是叠加的关键 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease; /* 添加过渡动画，让移动更丝滑 */
  background-size: cover; /* 让背景图铺满整个元素，也可以用contain */
  background-position: center; /* 初始时图片居中显示 */
}

/* 给每张图设置独立的背景图 */
.img-1 {
  background-image: url('你的第一张图路径');
  z-index: 4; /* 控制堆叠顺序，数字越大越在上层 */
}

.img-2 {
  background-image: url('你的第二张图路径');
  z-index: 3;
}

.img-3 {
  background-image: url('你的第三张图路径');
  z-index: 2;
}

.img-4 {
  background-image: url('你的第四张图路径');
  z-index: 1;
}

/* 鼠标悬停父容器时，分别移动四张图到对应角落 */
.image-container:hover .img-1 {
  top: 0;
  left: 0;
  width: 50%; /* 悬停时图片占容器一半大小，不需要缩放可以删掉这两行 */
  height: 50%;
}

.image-container:hover .img-2 {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
}

.image-container:hover .img-3 {
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
}

.image-container:hover .img-4 {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
}

关键要点说明 #

• 为什么你的其他图片不显示？ 因为你没给它们设置position: absolute，默认块级元素会按顺序排列在第一张图下方，而不是叠加。加上绝对定位和top:0;left:0后，所有图片才会初始重叠在一起。
• z-index的作用：控制图片的堆叠顺序，确保每张图都能被正确显示（初始时上层的图会盖住下层的，hover时分散后就不影响了）。
• 过渡动画：transition属性是可选的，但能让图片移动过程更流畅，提升用户体验。
• 自定义调整：你可以根据需求修改容器的宽高、图片的大小（比如hover时不想缩放，就删掉hover里的width和height，只保留位置属性），记得替换代码中的图片路径为你自己的图片地址。

内容的提问来源于stack exchange，提问作者Victor Rhéa