CSS 그라디언트 마스크를 사용하여 텍스트를 배경으로 페이드하는 방법은 무엇입니까?

그라디언트 마스크를 적용하여 텍스트를 배경으로 페이드하기

소개

화면 고정 배경 이미지를 스크롤 div에 넣으면 화면이 부드럽게 페이드 아웃되는 문제가 자주 발생합니다. 사용자가 아래로 스크롤할 때 텍스트가 겹쳐집니다. 이 기사에서는 CSS에서 그래디언트 마스크를 사용하는 솔루션을 살펴봅니다.

질문

CSS에서 그래디언트 마스크를 적용하여 텍스트의 일부만 배경으로 페이드할 수 있는 방법은 무엇입니까? 요소의 점진적인 페이딩 생성 효과?

답변

Webkit의 -webkit-mask-image 속성을 사용하면 원하는 효과를 얻을 수 있습니다.

-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%를 추가하면 스크롤할 항목이 더 있을 때만 콘텐츠가 페이드되도록 할 수 있습니다.

참고

• 이 솔루션은 Webkit의 독점적인 -webkit-mask-image를 사용하므로 브라우저 호환성이 필요합니다.
• Mozilla(Gecko)에는 입력으로 SVG 이미지가 필요한 유사한 '마스크' 기능이 있으며, 이는 base64 인코딩을 사용하여 삽입할 수 있습니다.

위 내용은 CSS 그라디언트 마스크를 사용하여 텍스트를 배경으로 페이드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!