Comment puis-je créer un trou dans une superposition pour révéler le contenu en dessous en utilisant uniquement CSS ?

Masquer les trous des calques en CSS

Créer des calques de masque sur un site Web et préserver la visibilité du contenu sous-jacent est un besoin courant. Cet article explique comment obtenir cet effet avec du CSS pur.

Question

Comment créer un trou dans le calque de masque afin que l'utilisateur puisse voir le contenu du site Web sous-jacent à travers le calque de masque ?

Solution CSS

Utilisez la propriété box-shadow pour créer des trous dans le calque de masque. Cette propriété permet de créer une ombre autour d'un élément, étaler une très grande ombre peut créer une zone essentiellement transparente.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

Comme indiqué ci-dessus, nous définissons le rayon d'expansion sur une très grande valeur (9999px). Cela créera une ombre qui couvrira presque tout le calque de masque, tout en préservant la zone transparente au centre du calque de masque.

Exemple de code

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

Conclusion

En utilisant la propriété box-shadow, nous avons réussi à créer un trou dans le calque de masque. Cette technique donne aux développeurs la flexibilité de créer des calques de masque tout en conservant la visibilité du contenu sous-jacent, élargissant ainsi les possibilités du CSS.

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!