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