suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Erstellen eines perforierten Behälters: eine Schritt-für-Schritt-Anleitung

Ich erstelle ein Tutorial zur ersten Verwendung meiner App.

Es sieht also aus wie ein Popup mit Informationen zur Verwendung der Schaltfläche

Im Tutorial möchte ich, dass der Hintergrund dunkler wird und ein Kreis erscheint, der um die Schaltfläche verläuft und einen Tutorialtext enthält

Also möchte ich einen Behälter mit einem runden Loch machen

Hier ist ein einfaches Beispiel: 

<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>

Aber ich möchte, dass das Loch im Knopf ist

P粉426906369P粉426906369264 Tage vor442

Antworte allen(2)Ich werde antworten

  • P粉436688931

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

    
  
  
  
  Document
  


  
    
    
    This button is used to delete your file.

    Antwort
    0
  • P粉775723722

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

    更新

    通过添加带有 overflow:hidden 的 <main> 容器更新了代码示例以包含覆盖层，以便代码片段显示更正确。

    原创

    只是作为替代解决方案发布：

    经过一些实验，我想出了这种新方法，它实际上显示一个透明的圆圈，而不是带有白色背景的圆圈，希望它更接近孔的所需行为。

    这允许看到按钮旁边的其他元素，并且还可以保持按钮的交互性，以便它可以正确接受悬停和单击效果。

    运行此代码片段以查看结果：

    
    
    
    
    Document
    
  
  
  
    
    
    
      
    This button is used to delete your file

    Antwort
    0
  • StornierenAntwort