communauté Apprendre Bibliothèque d'outils Loisirs

Français

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

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

Barbara Streisand

Libérer： 2024-10-30 00:48:02

original

912 Les gens l'ont consulté

Why Does Inset Box-Shadow Disappear Over Images with Transparent Backgrounds?

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!

source：php.cn

Article précédent：Comment modifier dynamiquement le contenu en survol à l'aide de CSS :: après un pseudo-élément ? Article suivant：Puis-je déclencher une animation de défilement CSS avec juste une balise d'ancrage ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2192

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2340

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1963

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...