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

Question

我想要一个覆盖图像的div。我可以通过在父元素中使用position:relative，并在div中使用position:absolute来使div覆盖图像，但是background-color会填充父元素的padding，导致它们不能正确地覆盖。下面是一个演示问题的片段。.parent{position:relative;padding:10px;width:40%;}.image{width:

P粉422227023 · Answer

当使用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;
}

P粉541796322 · Answer

这个片段以稍微不同的方式进行操作，将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;
}