CSS实现带局部裁剪的画中画图片叠加效果求助

现有代码问题 #

你当前的写法存在3个直接导致效果不符合预期的问题：

• 父容器.card未设置固定高度，内部两张图片均为绝对定位脱离正常文档流，父元素高度直接塌陷为0，无法形成稳定的叠层参考
• 下层图片仅做了位置偏移，没有加裁切约束，图片超出预期显示区域的部分会全部外露，无法实现局部裁切的画中画效果
• 叠层偏移量设置错误，上层黄色斑点图和下层图的位置差不对，无法对齐参考效果的叠放关系
• 不建议用<p>段落标签作为图片卡片容器，不符合HTML语义规范，建议替换为<div>

具体实现代码 #

修正后HTML结构 #

<div class="card">
  <!-- 下层底图裁切容器 -->
  <div class="crop-box">
    <img class="base-img" src="你的底图资源地址" alt="展示图片">
  </div>
  <!-- 上层黄色斑点叠加层 -->
  <img class="blot-layer" src="你的黄色斑点图资源地址" alt="装饰叠加层">
</div>

对应CSS样式 #

.card {
  position: relative;
  /* 以上层斑点图的实际尺寸设置父容器宽高，从根源解决高度塌陷问题 */
  width: 350px;
  height: 450px; /* 替换为你自己的斑点图实际高度 */
}

.crop-box {
  position: absolute;
  /* 控制底图露出区域的尺寸、偏移位置，按照参考图调整数值即可 */
  width: 300px;
  height: 400px;
  left: 20px;
  top: 25px;
  z-index: 2;
  /* 核心属性：超出该容器范围的底图内容全部被裁切，不会出现露边问题 */
  overflow: hidden;
}

.base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 如需显示底图的特定局部区域，调整object-position数值即可，默认居中显示 */
  object-position: center;
}

.blot-layer {
  position: absolute;
  width: 350px;
  top: 0;
  left: 0;
  z-index: 5;
  /* 黄色斑点图使用透明底PNG即可直接实现叠加效果，无需额外混合模式 */
}

调参提示 #

• 叠层顺序只需要保证上层斑点图z-index大于下层裁切容器即可，不需要给父容器设置过大的z-index数值
• 如果不想额外增加裁切容器标签，也可以直接给下层图片加clip-path属性实现裁切，比如clip-path: inset(25px 30px 25px 20px)，但外层容器+overflow:hidden的方案对新手更友好，调整显示区域、偏移量时更直观
• 如果底图显示的局部区域不对，不需要改图片本身，调整.base-img的object-position值就能移动显示范围

效果参考 #

• 错误实现效果：
  
• 目标实现效果：
  

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