如何在CSS中将一张图片叠加在另一张背景图片之上？

方法1：CSS多重背景（最简洁方案） #

直接在同一个元素上用逗号分隔设置多张背景图，前面的图片层级更高，会叠加在后方图片之上。

.overlay-box {
  width: 500px;
  height: 300px;
  /* 前景图在前，背景图在后 */
  background-image: url('前景图片地址'), url('背景图片地址');
  background-position: center, center; /* 分别控制两张图的位置 */
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover; /* 分别控制两张图的缩放方式 */
}

如果需要单独调整前景图大小，比如让它占容器的一半：

background-size: 50% auto, cover;

方法2：伪元素叠加 #

给容器添加::before或::after伪元素，将前景图放在伪元素内，通过定位覆盖在容器背景图上，适合需要单独控制前景图透明度、位置的场景。

.image-wrap {
  width: 500px;
  height: 300px;
  background-image: url('背景图片地址');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* 伪元素需相对容器定位 */
}

.image-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('前景图片地址');
  background-position: bottom right; /* 把前景图固定在右下角 */
  background-repeat: no-repeat;
  background-size: 150px 100px;
  opacity: 0.6; /* 降低透明度，让背景图透出 */
}

方法3：绝对定位子元素 #

如果前景图需要添加交互（比如点击、hover效果），可以用真实的<img>元素，通过绝对定位覆盖在容器背景图上。

<div class="img-container">
  <img src="前景图片地址" alt="前景图" class="top-img">
</div>

.img-container {
  width: 500px;
  height: 300px;
  background-image: url('背景图片地址');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.top-img {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: auto;
  /* 可选：添加边框或阴影增强视觉效果 */
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

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