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
更新
通过添加带有
overflow:hidden的<main>容器更新了代码示例以包含覆盖层，以便代码片段显示更正确。原创
只是作为替代解决方案发布：
经过一些实验，我想出了这种新方法，它实际上显示一个透明的圆圈，而不是带有白色背景的圆圈，希望它更接近孔的所需行为。
这允许看到按钮旁边的其他元素，并且还可以保持按钮的交互性，以便它可以正确接受悬停和单击效果。
运行此代码片段以查看结果：
This button is used to delete your file