구멍이 뚫린 용기 만들기: 단계별 가이드

Question

처음으로 앱 사용 방법에 대한 튜토리얼을 만들고 있습니다.

그래서 버튼 사용법이 팝업처럼 뜨네요

튜토리얼에서 배경을 어둡게 하고 버튼 주위에 튜토리얼 텍스트가 있는 원이 나타나기를 원합니다.

그래서 둥근 구멍이 있는 용기를 만들고 싶어요

다음은 간단한 예입니다.

으아악

하지만 단추에 구멍이 있었으면 좋겠어요

Answer 1

으아악

Answer 2

업데이트

코드 조각이 더 정확하게 표시되도록 overflow:hidden 的 <main>로 컨테이너를 추가하여 오버레이를 포함하도록 코드 예제를 업데이트했습니다.

원본

대체 솔루션으로 게시:

몇 가지 실험 끝에 흰색 배경의 원 대신 투명한 원을 실제로 표시하는 이 새로운 방법을 생각해 냈는데, 이것이 구멍의 원하는 동작에 더 가깝기를 바랍니다.

이렇게 하면 버튼 옆의 다른 요소를 볼 수 있고 버튼이 상호작용 상태를 유지하여 호버 및 클릭 효과를 올바르게 수용할 수 있습니다.

결과를 보려면 다음 코드 조각을 실행하세요.

으아아아