recherche

Maison  >  Questions et réponses  >  le corps du texte

Créer un conteneur perforé : un guide étape par étape

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粉426906369P粉426906369273 Il y a quelques jours463

répondre à tous(2)je répondrai

  • P粉436688931

    P粉4366889312024-04-01 09:54:48

    
  
  
  
  Document
  


  
    
    
    This button is used to delete your file.

    répondre
    0
  • P粉775723722

    P粉7757237222024-04-01 09:10:05

    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

    répondre
    0
  • Annulerrépondre