Comment créer une superposition avec un trou en utilisant CSS ?

Création de trous dans les superpositions à l'aide de CSS

Question :

Comment créer une superposition avec un trou, permettant la visibilité du site web sous-jacent contenu ?

Réponse :

Créer des trous dans les superpositions en utilisant uniquement CSS est en effet possible. Voici comment y parvenir :

Utilisation de CSS Box-Shadow :

1. Définissez une nouvelle classe CSS, telle que .hole.
2. Définissez la propriété box-shadow pour cette classe avec un grand rayon de propagation. Le rayon de propagation définit la taille du « trou » que vous souhaitez créer.
3. Définissez le positionnement et les dimensions appropriés pour l'élément .hole afin de déterminer l'endroit où vous souhaitez afficher le trou.

Par exemple, le code CSS suivant crée un trou dans la superposition :

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

Dans ce code, le trou est positionné à 20 pixels des bords supérieur et gauche de la superposition, d'une largeur de 200 pixels et d'une hauteur de 150 pixels. La propriété box-shadow crée une grande ombre avec un rayon de propagation de 9 999 px, masquant efficacement la superposition et révélant le contenu sous-jacent.

Exemple de code :

<p>Overlay content...</p>

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

<p>Underlying content...</p>

Ce code affichera le contenu superposé tout en vous permettant de voir le contenu sous-jacent à travers le "trou" défini par le .hole élément.

Remarque :

Cette approche vous permet de créer divers effets de trous, allant de simples régions transparentes à des conceptions plus complexes et visuellement attrayantes, améliorant l'expérience utilisateur et ajoutant une touche artistique à vos applications Web.

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!