Créer un conteneur perforé : un guide étape par étape
P粉426906369
P粉426906369 2024-03-31 11:20:02
0
2
377

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

P粉426906369
P粉426906369

répondre à tous(2)
P粉436688931

  
  
  
  Document
  


  

This button is used to delete your file.

P粉775723722

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 :

    
    
    
    Document
    
  
  
  

This button is used to delete your file

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!