父元素带padding时，如何让同级img与div精准重叠且尺寸一致

问题场景 #

需要实现一个div完全覆盖父容器内的图片，采用父元素position: relative、覆盖层position: absolute的方案时，覆盖层的背景会填充父元素的padding区域，导致和图片无法精准重叠。尝试用calc()手动减去padding值的方案效果接近，但底部仍有多余填充，且硬编码padding值不够灵活，因此不采用。

解决方案 #

方案1：CSS变量+定位边距（灵活无硬编码） #

通过CSS变量统一管理padding值，给绝对定位的覆盖层设置与父元素一致的边距，自动适配图片尺寸：

.parent {
  position: relative;
  --padding: 10px; /* 用变量统一维护padding值 */
  padding: var(--padding);
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.overlay {
  position: absolute;
  background-color: red;
  border-radius: 13px;
  opacity: 0.2;
  /* 用变量设置上下左右边距，自动缩放到图片的尺寸范围 */
  left: var(--padding);
  right: var(--padding);
  top: var(--padding);
  bottom: var(--padding);
}

<div class="parent">
  <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div class="overlay"></div>
</div>

说明：绝对定位元素设置left/right/top/bottom为父元素的padding值后，会自动将自身尺寸限制在父元素的content区域内，和图片的尺寸完全匹配，无需手动计算宽高，后续修改padding值只需调整变量即可。

方案2：background-clip裁剪背景区域 #

如果不想调整覆盖层的定位逻辑，可以通过裁剪背景的方式实现对齐：

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.overlay {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  left: 0;
  top: 0;
  opacity: 0.2;
  padding: 10px; /* 与父元素padding保持一致 */
  box-sizing: border-box; /* 让padding包含在宽高范围内 */
  background-clip: content-box; /* 仅在content区域显示背景色 */
}

说明：background-clip: content-box会将背景色限制在元素的content区域内，配合box-sizing: border-box确保覆盖层的总尺寸与父容器的padding-box一致，从而让背景区域和图片精准重叠。

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