如何通过::after伪元素在非固定位置图片上叠加另一张图片

可以通过::after伪元素实现图片叠加效果，你现有代码的问题出在定位逻辑错误，修改方案如下：

问题原因 #

• 你为::after伪元素设置了relative相对定位，该定位模式不会让元素脱离文档流，仅会基于自身原有位置偏移，会撑大父容器宽度，无法实现重叠效果
• 父元素.award2是默认行内元素，无法作为绝对定位元素的定位上下文，也无法正常控制尺寸

修改后的代码 #

CSS部分 #

/* 先修改父元素基础样式 */
.award2 {
  display: inline-block;
  position: relative;
  /* 按需调整奖章之间的间距 */
  margin-right: 12px;
}

/* 修改伪元素样式 */
.award2::after {
  content: "";
  position: absolute;
  /* 按需调整叠加图的位置，以下示例是对齐右上角 */
  top: -4px;
  right: -4px;
  /* 按需调整叠加图的尺寸 */
  width: 22px;
  height: 22px;
  background-image: url("imageToOverlay.png");
  background-size: cover;
  /* 确保叠加图显示在原有奖章上方 */
  z-index: 10;
}

说明 #

如果不需要调整叠加图的尺寸，也可以保留原来的content: url("imageToOverlay.png")写法，去掉背景图相关属性即可。HTML代码无需修改，可直接沿用你现有的结构。

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