스크롤 시 CSS 그라데이션을 사용하여 텍스트를 배경으로 페이드하려면 어떻게 해야 합니까?

그라디언트 마스크를 적용하여 배경 위의 텍스트 페이드

사용자가 스크롤할 때 텍스트가 배경으로 원활하게 전환되기를 원하십니까? 그렇다면 스크롤하는 div 상단의 배경에 그라데이션 마스크를 적용하는 것이 필요한 솔루션일 수 있습니다.

해결책:

다행히도 Webkit은 편리한 기능을 제공합니다. 이에 대한 CSS 옵션:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

이 코드는 불투명(상단)에서 투명으로 그라데이션 페이딩을 생성합니다. (아래에서 10%) 요소의 경우. 스크롤할 때 콘텐츠가 희미해지도록 하려면 padding-bottom: 50%를 추가하세요.

Mozilla (Gecko) Fallback:

원래 Firefox에는 SVG 마스크 이미지가 필요했습니다. 하지만 이제 마스크 이미지를 지원합니다.

위 내용은 스크롤 시 CSS 그라데이션을 사용하여 텍스트를 배경으로 페이드하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!