CSS 오버레이에 투명한 구멍을 만드는 방법은 무엇입니까?

CSS 오버레이에 구멍 만들기

기본 웹사이트 요소를 표시하기 위해 오버레이에 구멍을 만드는 것은 CSS만으로 가능합니다. 한 가지 효과적인 기술은 확산 반경이 큰 상자 그림자 속성을 활용하는 것입니다.

이 효과를 얻으려면:

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); /* Create a transparent hole with a blue border */
}

이 상자 그림자는 작은 파란색이 있는 크고 투명한 사각형을 만듭니다. 국경. 오버레이에 효과적으로 구멍을 만들어 기본 콘텐츠를 볼 수 있게 해줍니다. 9999px의 확산 반경은 구멍이 전체 오버레이 영역을 덮도록 보장합니다.

HTML 예:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper...</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci...</p>

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

이 CSS 코드 및 HTML 예는 다음을 사용하여 오버레이에 투명한 구멍을 만드는 방법을 보여줍니다. CSS만 사용하면 아래 웹사이트 요소를 볼 수 있습니다.

위 내용은 CSS 오버레이에 투명한 구멍을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!