Pourquoi l'ombre de la boîte en médaillon disparaît-elle sur les images avec un arrière-plan transparent ?

Comprendre le problème des ombres de boîte incrustée sur les images

Dans la conception Web, l'utilisation d'ombres de boîte incrustée pour créer de la profondeur et de la dimension au sein des éléments est une technique courante. Cependant, lorsqu’il s’agit de conteneurs contenant des images, ce n’est pas toujours simple. Le problème survient lorsque l'ombre de la boîte en médaillon semble disparaître sur les images intégrées.

Le cas des ombres invisibles

Considérez l'exemple fourni dans la question d'origine :

<code class="css">body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

<code class="html"><main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main></code>

Bien que l'objectif soit d'appliquer une ombre de boîte incrustée autour du conteneur, y compris l'image, elle ne parvient pas à apparaître. Pourquoi cela se produit-il ?

La question de la transparence des images

La raison de l'ombre manquante sur les images réside dans la transparence. Lorsqu'une image a un arrière-plan transparent, il s'agit essentiellement d'une fenêtre sur l'élément d'arrière-plan. Dans ce cas, le fond du conteneur est noir. De ce fait, l'ombre incrustée devient invisible sur les zones transparentes de l'image.

Surmonter la barrière de la transparence

Pour contourner ce problème, une solution simple et élégante s'offre : utiliser le CSS :après le pseudo-élément. En ajoutant un pseudo-élément :after au conteneur, nous pouvons créer un calque supplémentaire qui se trouve au-dessus de l'image et reçoit l'ombre de la boîte en médaillon.

Dans l'extrait CSS mis à jour ci-dessous, nous appliquons le pseudo :after à l'élément

conteneur :

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

Avec cette modification, l'ombre de la boîte en médaillon apparaît désormais sur les zones opaques et transparentes de l'image, donnant l'effet d'ombre souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!