Je réalise un tutoriel sur la façon d'utiliser mon application pour la première fois.
Cela ressemble donc à une fenêtre contextuelle expliquant comment utiliser le bouton
Dans le tutoriel, je veux que l'arrière-plan s'assombrisse et qu'un cercle apparaisse qui entourera le bouton et contienne un texte de tutoriel
Donc, je veux faire un récipient avec un trou rond
Voici un exemple simple :
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.dark{
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.377);
}
.circle{
height: 150px;
width: 150px;
border-radius: 50%;
background-color: white;
}
</style>
</head>
<body>
<div class="dark">
<p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
<div class="circle"></div>
</div>
<button style="margin:200px;">The Button</button>
</body>
Mais je veux que le trou soit dans le bouton
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Mise à jour
Exemples de code mis à jour pour inclure des superpositions en ajoutant des conteneurs avec
overflow:hidden的<main>afin que les extraits de code s'affichent plus correctement.Original
Je publie simplement comme solution alternative :
Après quelques expérimentations, j'ai mis au point cette nouvelle méthode qui affiche en fait un cercle transparent au lieu d'un cercle avec un fond blanc, j'espère qu'elle est plus proche du comportement souhaité du trou.
Cela permet de voir d'autres éléments à côté du bouton et maintient également le bouton interactif afin qu'il accepte correctement les effets de survol et de clic.
Exécutez cet extrait de code pour voir les résultats :
This button is used to delete your file