CSS 트릭: 고정 위치 이미지로 페이지 하단을 페이드 아웃

저는 fortuito.us 블로그에서 이 미묘한 효과를 정말 좋아합니다. 페이지 하단의 텍스트가 사라지다 페이지 내용을 위아래로 스크롤해도 페이지 하단으로 사라지는 것처럼 나타납니다.

이 작업은 다음과 같이 페이지의 고정된 위치에 있는 투명한 이미지를 사용하여 수행할 수 있습니다.

#bottom_fade {
   z-index: 99;
   position: fixed;
   bottom: 0%;
    background-image: url("bottom-fade.png");
}

z 인덱스가 높으면 최상위 계층이 됩니다.

[라이브 예시]

[다운로드 예제]