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%를 추가하는 것이 좋습니다.

Firefox 및 최신 버전의 Microsoft Edge와 같이 CSS 마스크를 지원하는 브라우저에서 다음 구문은 다음과 같습니다. 선호:

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

이 코드는 요소의 아래쪽 부분을 페이드 아웃하여 배경 이미지를 드러내는 수직 그라데이션 마스크를 생성합니다.

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