그래디언트 배경 그라디언트 그라디언트 사라지는 텍스트

Question

나는 이미지와 같은 텍스트 효과를 얻으려고합니다. 배경이 단색으로 채워진 경우 css을 통해 이러한 종류의 텍스트를 가져 오는 데 아무런 문제가 없습니다. 그러나 그라데이션 배경에서는 이것이 작동하지 않습니다. 텍스트를 이미지로 만들려고했으나 결과는 종류가 다르며 더미 (텍스트는 이미지가 아니라 텍스트 여야 함)입니다.

어떻게 이러한 효과를 얻을 수 있습니까?

Answer 1

하나의 해결책은 CSS 마스크를 사용하는 것입니다. 여기

은 예입니다 http://jsfiddle.net/qhLWA/

HTML :

<div id="box"> 
    <div id="box-content"> 
    <h1>Testing</h1> 
    <h2>This is a test</h2> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit, metus euismod aliquam pretium, magna ligula rhoncus justo, non feugiat erat lectus ut erat. Donec dictum, magna sit amet euismod commodo, enim erat euismod tellus, sit amet tincidunt est arcu convallis risus. Curabitur at nunc enim. Cras vitae laoreet sem. Morbi nec neque blandit, ullamcorper purus eget, pretium dolor. Phasellus viverra, felis eget porta blandit, nunc lorem hendrerit urna, et sollicitudin est velit eu risus. Suspendisse eget tellus bibendum, commodo velit at, volutpat ipsum. Mauris sollicitudin velit ut ligula hendrerit pulvinar. In pellentesque nisl sem, a hendrerit ipsum tincidunt eget. Ut convallis ultricies arcu, ac imperdiet urna ultrices eu. Etiam nisl orci, vulputate et varius quis, placerat sed enim. Proin vitae posuere mi, vel fringilla nibh. Donec nec risus non dolor faucibus ornare eget nec nisl. Cras suscipit, sapien ut blandit pretium, erat lectus tristique risus, faucibus aliquam urna ipsum sed diam. 
    </div> 
</div> 

<svg width="0" height="0"> 
    <defs> 
    <linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%"> 
     <stop stop-color="white" offset="0.2"/> 
     <stop stop-color="black" offset="1"/> 
    </linearGradient> 

    <mask id="gradientMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <rect width="1" height="1" fill="url(#gradient)" /> 
    </mask> 
    </defs> 
</svg> 

CSS : 그것은 파이어 폭스에서 지원하는 CSS mask property를 사용

#box { 
    padding: 10px; 
    width: 500px; 
    height: 300px; 
    background: -moz-linear-gradient(right, #37b8d4, #4d37d4); 
    background: linear-gradient(to right, #37b8d4, #4d37d4); 
    font-family: 'Helvetica', sans-serif; 
    color: #fff; 
    line-height: 150%; 
} 

#box-content { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    -webkit-mask-image: linear-gradient(to bottom, black 20%, rgba(0, 0, 0, 0)); 
    mask: url(#gradientMask); 
} 

. Chrome의 경우 -webkit-mask-image property을 사용합니다.

의 HTML5 Rocks 문서를 참조하십시오.

또 다른 옵션은 @amol에서 제안한 옵션입니다. 참조 이미지와 같이 텍스트 줄이 너무 많지 않은 경우 첫 번째 줄의 텍스트를 <div> 클래스에 "first-line", 두 번째 줄의 텍스트를 <div> "second- 라인 "등 그런 다음, 점차적으로 텍스트의 라인을 페이드 아웃 RGBA()를 사용 :
http://jsfiddle.net/qhLWA/1/

RGBA() 접근 방식의 장점은 다양한 브라우저 지원 (크롬, 파이어 폭스, 사파리, 인터넷  이다 탐색기   9+ 및 오페라   10+) :
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value