So erreichen Sie mit Padding eine Überlappung und gleiche Größe von Geschwisterbildern/-divs im übergeordneten Element

Question

Ich möchte ein Div, das das Bild abdeckt. Ich konnte dies erreichen, indem ich position: relative，并在div中使用position: absolute来使div覆盖图像，但是background-color im übergeordneten Element verwendete, wodurch die Polsterung des übergeordneten Elements aufgefüllt wurde und diese nicht richtig abgedeckt wurden.

Nachfolgend finden Sie einen Ausschnitt, der das Problem veranschaulicht.

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

Ich hätte etwas calc()来减去padding来实现相当接近的效果。这几乎可以工作，但是divPolsterung unten etwas zu viel gebrauchen können. Wie auch immer, ich möchte nicht viele Werte für das Auffüllen fest codieren. Selbst wenn es überhaupt funktioniert, gefällt mir diese Lösung nicht wirklich.

Hier ist ein Ausschnitt, der die calc()-Methode zeigt.

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