부드러운 가장자리 콘텐츠 페이드

웹 기능: 마스크

개요

컨테이너의 가장자리에 투명도 그래디언트를 적용하려면 (예: 스크롤할 수 있는 콘텐츠가 더 있음을 나타내거나 텍스트를 페이드 아웃하기 위해) 선형 그래디언트와 함께 CSS 마스킹을 사용하세요. 이 접근 방식은 실제로 콘텐츠 자체를 페이드하여 텍스트 선택이나 포인터 이벤트를 방해하지 않고 배경이 자연스럽게 표시되도록 하므로 반투명 오버레이를 사용하는 것보다 우수합니다.

구현

부드러운 가장자리 페이드를 구현하려면 다음 단계를 따르세요.

컨테이너의 하단 가장자리 페이드

이는 스크롤 가능한 영역에 더 많은 콘텐츠가 있음을 나타내는 데 유용합니다.

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

상단 및 하단 가장자리 페이드

여러 색상 중지점이 있는 단일 그라데이션을 사용하여 양쪽 가장자리를 페이드할 수 있습니다.

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

대체 전략

브라우저가 mask-image 또는 접두사가 붙은 버전을 지원하지 않는 경우:

  • 콘텐츠가 흐려지지 않고 가장자리가 선명하게 표시됩니다.
  • 페이드 없이도 인터페이스가 계속 작동하고 콘텐츠를 읽을 수 있어야 합니다 (점진적 개선).
  • 반투명 오버레이를 대체로 사용할 수 있지만 배경 색상을 알아야 하며 pointer-events: none를 사용하지 않는 한 텍스트 선택을 방해할 수 있습니다.
/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}