콘텐츠 생성 방법: 오버레이 효과

CSS를 사용하여 레이어 효과(叠加效果)를 만드는 방법을 배우세요.

레이어 효과를 만드는 방법

제1단계 - HTML 추가:

어떤 요소든지 사용하고, 문서의 어떤 위치에든지 배치하세요:

<div id="overlay"></div>

제2단계 - CSS 추가:

레이어 요소의 스타일을 설정합니다:

#overlay {
  position: fixed; /* 페이지 내용 위에 위치 */
  display: none; /* 기본적으로 숨김 */
  width: 100%; /* 전체 너비 (전체 페이지를 덮음) */
  height: 100%; /* 전체 높이 (전체 페이지를 덮음) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* 투명도가 있는 검은 배경 */
  z-index: 2; /* 다른 요소에 대해 다른 순서를 사용하면, 층간 순서를 지정하세요 */
  cursor: pointer; /* 마우스 오버 시 마우스 포인터 추가 */
}

제3단계 - JavaScript 추가:

JavaScript를 사용하여 레이어 효과를 열고 닫습니다:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

직접 시도해 보세요

텍스트가 포함된 레이어 효과

覆盖 레이어에 원하는 내용을 추가하고, 원하는 위치에 배치하세요. 이 예제에서는 페이지 중앙에 텍스트를 추가했습니다:

실례

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Overlay Text</div>
</div>

직접 시도해 보세요