CSS를 사용하여 구멍이 있는 오버레이를 어떻게 만들 수 있나요?

CSS를 사용하여 오버레이에 구멍 만들기

질문:

오버레이를 어떻게 만들 수 있나요? 구멍이 있어 기본 웹사이트를 볼 수 있습니다. 콘텐츠?

답변:

CSS만 사용하여 오버레이에 구멍을 만드는 것은 실제로 가능합니다. 이를 달성하는 방법은 다음과 같습니다.

CSS Box-Shadow 사용:

1. .hole과 같은 새 CSS 클래스를 정의합니다.
2. 이 클래스의 확산 반경이 큰 상자 그림자 속성을 설정하십시오. 스프레드 반경은 생성하려는 "구멍"의 크기를 정의합니다.
3. 구멍을 표시할 위치를 결정하려면 .hole 요소에 적절한 위치와 치수를 설정하세요.

예를 들어 다음 CSS 코드는 오버레이에 구멍을 만듭니다.

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

이 코드에서 구멍은 위쪽에서 20픽셀 떨어진 곳에 위치하며 너비가 200픽셀이고 높이가 150픽셀인 오버레이의 왼쪽 가장자리입니다. box-shadow 속성은 확산 반경이 9999px인 큰 그림자를 생성하여 오버레이를 효과적으로 마스킹하고 기본 콘텐츠를 드러냅니다.

코드 예:

<p>Overlay content...</p>

<div class="hole"></div>

<p>Underlying content...</p>

이 코드는 .hole에 의해 정의된 "구멍"을 통해 기본 콘텐츠를 볼 수 있도록 허용하면서 오버레이 콘텐츠를 표시합니다. element.

참고:

이 접근 방식을 사용하면 단순한 투명 영역부터 보다 복잡하고 시각적으로 매력적인 디자인에 이르기까지 다양한 구멍 효과를 만들어 사용자 경험을 향상하고 웹 애플리케이션에 예술성을 더해보세요.

위 내용은 CSS를 사용하여 구멍이 있는 오버레이를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!