如何在具有填充的父元素中实现兄弟图片/ div 的重叠和相同大小

Question

我想要一个覆盖图像的div。我可以通过在父元素中使用position: relative，并在div中使用position: absolute来使div覆盖图像，但是background-color会填充父元素的padding，导致它们不能正确地覆盖。

下面是一个演示问题的片段。

.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;
}

<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>

我可以通过一些calc()来减去padding来实现相当接近的效果。这几乎可以工作，但是div在底部填充得有点多。无论如何，我不想为padding硬编码很多值，所以即使它完全工作，我也不太喜欢这个解决方案。

下面是一个展示calc()方法的片段。

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

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

.overlay {
  position: absolute;
  background-color: red;
  width: calc(100% - 2 * 10px);
  height: calc(100% - 2 * 10px);
  border-radius: 13px;
  left: 10px;
  top: 10px;
  opacity: 0.2;
}

<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>

Answer 1

当使用HTML5时，浏览器会在img标签的底部添加一些填充。可以通过将图像设置为块级元素来避免这种情况。所以只需在.image类中添加display: block，然后就可以了。

顺便说一下，要定义绝对元素的宽度/高度，除了可以使用calc()，还可以使用4个值top、right、bottom、left来定义。

:root {
  --custom-padding: 10px;
}

.parent {
  position: relative;
  padding: var(--custom-padding);
  width: 40%;
}

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

.overlay {
  position: absolute;
  background-color: red;
  border-radius: 13px;
  bottom: var(--custom-padding);
  right: var(--custom-padding);
  left: var(--custom-padding);
  top: var(--custom-padding);
  opacity: 0.2;
}

<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>

Answer 2

这个片段以稍微不同的方式进行操作，将img放在overlay div内，并将实际的绿色、低透明度的overlay作为overlay div的after伪元素。

这样你就不必构建对父元素padding的任何了解。

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
  background: red;
  height: fit-content;
}

.image {
  width: 100%;
  border-radius: 13px;
  top: 0;
  left: 0;
}

.overlay {
  position: relative;
  padding: 0;
  width: fit-content;
  height: fit-content;
}

.overlay::after {
  content: '';
  position: absolute;
  background-color: green;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  left: 0;
  top: 0;
  opacity: 0.2;
  padding: 0px;
}

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