84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
처음으로 앱 사용 방법에 대한 튜토리얼을 만들고 있습니다.
그래서 버튼 사용법이 팝업처럼 뜨네요
튜토리얼에서 배경을 어둡게 하고 버튼 주위에 튜토리얼 텍스트가 있는 원이 나타나기를 원합니다.
그래서 둥근 구멍이 있는 용기를 만들고 싶어요
다음은 간단한 예입니다.
으아악
하지만 단추에 구멍이 있었으면 좋겠어요
업데이트
코드 조각이 더 정확하게 표시되도록 overflow:hidden 的 <main>로 컨테이너를 추가하여 오버레이를 포함하도록 코드 예제를 업데이트했습니다.
overflow:hidden
<main>
원본
대체 솔루션으로 게시:
몇 가지 실험 끝에 흰색 배경의 원 대신 투명한 원을 실제로 표시하는 이 새로운 방법을 생각해 냈는데, 이것이 구멍의 원하는 동작에 더 가깝기를 바랍니다.
이렇게 하면 버튼 옆의 다른 요소를 볼 수 있고 버튼이 상호작용 상태를 유지하여 호버 및 클릭 효과를 올바르게 수용할 수 있습니다.
결과를 보려면 다음 코드 조각을 실행하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
업데이트
코드 조각이 더 정확하게 표시되도록
overflow:hidden的<main>로 컨테이너를 추가하여 오버레이를 포함하도록 코드 예제를 업데이트했습니다.원본
대체 솔루션으로 게시:
몇 가지 실험 끝에 흰색 배경의 원 대신 투명한 원을 실제로 표시하는 이 새로운 방법을 생각해 냈는데, 이것이 구멍의 원하는 동작에 더 가깝기를 바랍니다.
이렇게 하면 버튼 옆의 다른 요소를 볼 수 있고 버튼이 상호작용 상태를 유지하여 호버 및 클릭 효과를 올바르게 수용할 수 있습니다.
결과를 보려면 다음 코드 조각을 실행하세요.