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. Je peux faire en sorte que le div couvre l'image en utilisant position:relative dans l'élément parent et position:absolute dans le div, mais la couleur d'arrière-plan remplit le remplissage de l'élément parent, ce qui l'empêche de se couvrir correctement. Vous trouverez ci-dessous un extrait illustrant le problème. .parent{position:relative;padding:10px;largeur:40%;}.image{largeur :

P粉422227023 · Answer

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;
}

P粉541796322 · Answer

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;
}