Maison > interface Web > tutoriel CSS > Comment créer un rendu d'ombres de boîte incrustée sur des images ?

Comment créer un rendu d'ombres de boîte incrustée sur des images ?

Susan Sarandon
Libérer: 2024-11-04 06:47:01
original
1032 Les gens l'ont consulté

How to Make Inset Box-Shadows Render Over Images?

Incrustation d'ombre de boîte et chevauchement d'images

Dans un scénario où un conteneur avec une ombre de boîte en médaillon contient à la fois des images et du texte, il peut sembler que l'ombre ne rendu sur les images. Ce problème se produit car l'ombre incrustée est appliquée au conteneur lui-même, alors que l'image est un élément distinct au sein du conteneur.

Pour résoudre ce problème et obtenir l'effet d'ombre souhaité, pensez à utiliser  :after pseudo-élément :

<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

En ajoutant ce CSS, une boîte semi-transparente est créée sur l'image, permettant ainsi à l'ombre incrustée de s'étendre sur toute la surface de l'image. conteneur, y compris l'image.

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
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal