cari

Rumah  >  Soal Jawab  >  teks badan

Mencipta bekas berlubang: panduan langkah demi langkah

Saya sedang membuat tutorial tentang cara menggunakan apl saya buat kali pertama.

Jadi ia kelihatan seperti pop timbul tentang cara menggunakan butang

Dalam tutorial saya mahu latar belakang menjadi gelap dan bulatan muncul yang akan mengelilingi butang dan mempunyai teks tutorial

So, nak buat bekas berlubang bulat

Berikut ialah contoh mudah: 

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

Tetapi saya mahu lubang itu berada di butang

P粉426906369P粉426906369264 hari yang lalu441

membalas semua(2)saya akan balas

  • P粉436688931

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

    
  
  
  
  Document
  


  
    
    
    This button is used to delete your file.

    balas
    0
  • P粉775723722

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

    Dikemas kini

    Contoh kod dikemas kini untuk memasukkan tindanan dengan menambahkan bekas dengan overflow:hidden 的 <main> supaya coretan kod dipaparkan dengan lebih betul.

    Asal

    Hanya menyiarkan sebagai penyelesaian alternatif:

    Selepas beberapa percubaan, saya menghasilkan kaedah baharu ini yang sebenarnya memaparkan bulatan lutsinar dan bukannya bulatan dengan latar belakang putih, semoga ia lebih dekat dengan gelagat lubang yang diingini.

    Ini membolehkan elemen lain di sebelah butang dilihat, dan juga memastikan butang interaktif supaya ia menerima kesan tuding dan klik dengan betul.

    Jalankan coretan kod ini untuk melihat keputusan: 

    
    
    
    
    Document
    
  
  
  
    
    
    
      
    This button is used to delete your file

    balas
    0
  • Batalbalas