Pourquoi l'ombre de boîte incrustée ne fonctionne-t-elle pas sur les images et comment y remédier ?

L'ombre de la boîte en médaillon ne se chevauche pas : un dilemme résolu

L'ombre de la boîte en médaillon est un outil puissant pour créer de la profondeur et de l'accent dans la conception Web. Cependant, cette méthode peut rencontrer des difficultés lorsqu’elle est appliquée sur des images. Cet article examine pourquoi l'insert box-shadow ne fonctionne pas sur les images et présente une solution utilisant le pseudo-élément CSS :after.

Le problème

Lors de l'application de l'insert box-shadow à un conteneur qui inclut images, l’ombre peut ne pas apparaître sur les images elles-mêmes. Au lieu de cela, l’ombre n’affectera que l’arrière-plan du conteneur. Cela peut créer l'illusion que les images flottent au-dessus de l'ombre.

Explication

La raison de ce comportement réside dans le mécanisme de rendu des navigateurs Web. L'ombre de la boîte en médaillon est appliquée à l'arrière-plan d'un élément, qui est généralement une couleur unie ou un dégradé. Lorsqu'une image est placée dans l'élément, le navigateur considère l'image comme un élément distinct avec son propre arrière-plan indépendant. Par conséquent, l'ombre de la boîte en médaillon n'affectera pas l'arrière-plan de l'image.

Solution : CSS :after Pseudo Element

Pour surmonter ce défi, nous pouvons utiliser le pseudo-élément :after. En ajoutant un pseudo-élément :after au conteneur et en y appliquant l'ombre de la boîte en médaillon, nous pouvons créer un nouveau calque qui superposera les images.

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

Ce code CSS crée un pseudo-élément :after avec la même largeur et hauteur que le conteneur. Il est positionné absolument à l'intérieur du conteneur et placé en haut. L'encart box-shadow est appliqué au pseudo-élément :after, garantissant qu'il chevauche les images.

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!