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

CSS 오버레이에 구멍 만들기

오버레이에 구멍을 만들어 아래의 콘텐츠가 비쳐 보이는 효과를 만드는 것이 가능합니다. .

CSS Box Shadow 사용

이 효과를 얻으려면 확산 반경이 큰 CSS box-shadow 속성을 사용하세요.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

이렇게 하면 요소 주위에 크고 반투명한 그림자가 생성됩니다.

예

다음 예에서는 구멍 클래스가 있는 오버레이 div에 "구멍"이 생성됩니다.

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

<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 오버레이에 구멍을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!