Comment créer des trous transparents dans les superpositions CSS sans JavaScript ?

Création de trous transparents dans les superpositions avec CSS

Lorsque vous travaillez avec des superpositions, il peut être souhaitable de créer des sections transparentes à l'intérieur de celles-ci, ce qui permet les téléspectateurs de voir la page Web sous-jacente. Cet effet peut être obtenu uniquement via CSS, éliminant ainsi le besoin de JavaScript.

Une méthode efficace consiste à utiliser la propriété box-shadow avec un rayon de propagation exceptionnellement grand. Ce faisant, vous créez essentiellement une ombre expansive qui chevauche les éléments sous-jacents, les obscurcissant efficacement.

Pour illustrer cette technique, considérez le code CSS suivant :

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

Lorsqu'il est appliqué à un Élément HTML, ce code produira un trou transparent dans la superposition, comme on peut le voir dans ce qui suit exemple :

HTML :

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

<div class="hole"></div>

En conclusion, l'utilisation de box-shadow avec un grand rayon de propagation offre un moyen simple et efficace de créer des trous transparents dans les superpositions CSS, permettant une création dynamique et effet visuellement attrayant.

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!