CSS만 사용하여 오버레이 아래에 있는 콘텐츠를 표시하기 위해 오버레이에 구멍을 만들려면 어떻게 해야 합니까?

CSS의 마스크 레이어 구멍

웹사이트에서 마스크 레이어를 만들고 기본 콘텐츠의 가시성을 유지하는 것은 일반적인 요구 사항입니다. 이 문서에서는 순수 CSS를 사용하여 이 효과를 얻는 방법을 살펴봅니다.

질문

사용자가 마스크 레이어를 통해 기본 웹사이트의 콘텐츠를 볼 수 있도록 마스크 레이어에 구멍을 만드는 방법은 무엇입니까?

CSS 솔루션

box-shadow 속성을 사용하여 마스크 레이어에 구멍을 만듭니다. 이 속성을 사용하면 요소 주위에 그림자를 만들 수 있으며, 매우 큰 그림자를 퍼뜨리면 본질적으로 투명한 영역을 만들 수 있습니다.

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

위와 같이 확장 반경을 매우 큰 값(9999px)으로 설정했습니다. 이렇게 하면 마스크 레이어 중앙의 투명 영역을 유지하면서 거의 전체 마스크 레이어를 덮는 그림자가 생성됩니다.

코드 예시

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

결론

box-shadow 속성을 사용하여 마스크 레이어에 구멍을 만드는 데 성공했습니다. 이 기술을 통해 개발자는 기본 콘텐츠의 가시성을 유지하면서 마스크 레이어를 생성할 수 있는 유연성을 제공하여 CSS의 가능성을 확장합니다.

위 내용은 CSS만 사용하여 오버레이 아래에 있는 콘텐츠를 표시하기 위해 오버레이에 구멍을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!