简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Créer un conteneur perforé : un guide étape par étape
P粉426906369
P粉426906369 2024-03-31 11:20:02
0
2
381

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
P粉4366889312024-04-01 09:54:48 2 plancher 

  
  
  
  Document
  


  

    
This button is used to delete your file.
Comme +0
Ajouter une réponse
P粉775723722
P粉7757237222024-04-01 09:10:05 1 plancher

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
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
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！