如何在具有填充的父元素中實現兄弟圖片/ 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>