Comment créer un trou transparent dans une superposition CSS ?

Créer un trou dans les superpositions CSS

Créer un trou dans une superposition pour révéler les éléments sous-jacents du site Web est possible avec CSS seul. Une technique efficace consiste à utiliser la propriété box-shadow avec un grand rayon de propagation.

Pour obtenir cet effet :

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); /* Create a transparent hole with a blue border */
}

Cette box-shadow crée un grand carré transparent avec un petit bleu frontière. Cela crée effectivement un trou dans la superposition, vous permettant de voir le contenu sous-jacent. Le rayon de propagation de 9999 px garantit que le trou couvre toute la zone de superposition.

Exemple HTML :

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper...</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci...</p>

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

Ce code CSS et cet exemple HTML montrent comment créer un trou transparent dans une superposition à l'aide de uniquement CSS, vous permettant de voir les éléments du site Web en dessous.

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!