如何使用CSS在HTML多张图片上方叠加一张单独加载的图片

AI 小北

2026-10-7

实现CSS叠加图片到现有图片上方的方案

你可以通过给图片增加包裹容器配合CSS伪元素的方式实现，不需要修改原有图片逻辑，具体操作如下：

步骤1：调整HTML结构

给所有需要叠加图层的图片外层套一个类名为img-overlay-wrapper的容器：

<!-- 原有图片结构 -->
<img src="https://i.sstatic.net/gSwOV.jpg" alt="示例图1">
<img src="https://i.sstatic.net/LjUfF.png" alt="示例图2">
<img src="https://i.sstatic.net/tlyje.jpg" alt="示例图3">

<!-- 调整后结构 -->
<div class="img-overlay-wrapper">
  <img src="https://i.sstatic.net/gSwOV.jpg" alt="示例图1">
</div>
<div class="img-overlay-wrapper">
  <img src="https://i.sstatic.net/LjUfF.png" alt="示例图2">
</div>
<div class="img-overlay-wrapper">
  <img src="https://i.sstatic.net/tlyje.jpg" alt="示例图3">
</div>

步骤2：添加CSS样式

在你的样式表中加入以下代码，替换叠加图片地址即可生效：

/* 图片容器样式，自适应内部图片大小 */
.img-overlay-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0; /* 消除图片下方默认留白 */
}

/* 叠加层样式，通过CSS加载叠加图片 */
.img-overlay-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 替换为你需要叠加的图片地址 */
  background-image: url("你的叠加图地址.png");
  /* 按需调整叠加图显示效果 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9; /* 透明度调整，不需要可删除 */
  z-index: 10; /* 确保叠加层在原有图片上方 */
  pointer-events: none; /* 不遮挡原有图片的点击、选中等交互 */
}