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

我想要一个覆盖图像的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>

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

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

全部回复(2)

P粉4222270232023-09-13 00:53:20 2楼

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

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

赞 +0

添加回复

P粉5417963222023-09-13 00:18:45 1楼

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

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

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