简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Creating a perforated container: a step-by-step guide
P粉426906369
P粉426906369 2024-03-31 11:20:02
0
2
318

I'm making a tutorial on how to use my app for the first time.

So it looks like a popup on how to use the button

In the tutorial I want the background to darken and a circle to appear that will go around the button and have a tutorial text

So, I want to make a container with a round hole

This is a simple example: 

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

But I want the hole to be in the button

P粉426906369
P粉426906369

reply all(2)
P粉436688931
P粉4366889312024-04-01 09:54:48 2 floor 

  
  
  
  Document
  


  

    
This button is used to delete your file.
Like +0
Add Reply
P粉775723722
P粉7757237222024-04-01 09:10:05 1 floor

renew

Updated the code example to include overlays by adding the <main> container with overflow:hidden so that the code snippet displays more correctly.

Original

Just posted as an alternative solution:

After some experimentation I came up with this new method that actually displays a transparent circle instead of a circle with a white background, hopefully it's closer to the desired behavior of the hole.

This allows other elements next to the button to be seen, and also keeps the button interactive so that it correctly accepts hover and click effects.

Run this code snippet to see the results: 

    
    
    
    Document
    
  
  
  

    

      
This button is used to delete your file
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！