Comment obtenir un chevauchement et la même taille d'images/divs frères et sœurs dans l'élément parent avec remplissage

Question

Je veux un div qui couvre l'image. J'ai pu le faire en utilisant position: relative，并在div中使用position: absolute来使div覆盖图像，但是background-color dans l'élément parent, ce qui remplirait le remplissage de l'élément parent, les empêchant de se couvrir correctement.

Vous trouverez ci-dessous un extrait illustrant le problème.

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

J'aurais pu utiliser un peu trop de calc()来减去padding来实现相当接近的效果。这几乎可以工作，但是divrembourrage en bas. Quoi qu'il en soit, je ne veux pas coder en dur beaucoup de valeurs pour le remplissage, donc même si cela fonctionne du tout, je n'aime pas vraiment cette solution.

Voici un extrait montrant la méthode 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

Lorsque vous utilisez HTML5, le navigateur le fera img标签的底部添加一些填充。可以通过将图像设置为块级元素来避免这种情况。所以只需在.image类中添加display: blocket tout va bien.

À propos, pour définir la largeur/hauteur absolue d'un élément, vous pouvez utiliser calc()，还可以使用4个值top、right、bottom、left à la place.

: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

Cet extrait le fait d'une manière légèrement différente, en plaçant l'img à l'intérieur du div de superposition et en utilisant la superposition verte réelle à faible opacité comme pseudo-élément après du div de superposition.

De cette façon, vous n'avez pas besoin d'acquérir de connaissances sur le remplissage de l'élément parent.

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