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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:
This button is used to delete your file