CSS를 사용하여 텍스트 그라디언트를 어떻게 추가합니까?

Question

<div class="firstname"> 
<a href="index.html"><p class="names">DANIEL</p></a> 
</div> 

위의 내용은 html입니다.

h1.method1 { 
background: -webkit-linear-gradient(top, #878787, #000); 
background: linear-gradient(top, #878787, #000); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;} 

h1.method2 { 
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1)); 
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));} 

위는 방법 나던 직장이나 내가 사용하고 있다면 나는 확실하지 않다, 내가 .names 선택하고 .firstname의 .names 선택기를 사용하려고 노력하고, 내가 a.names 선택을 시도 것입니다 잘못된 선택자. 하지만 전반적으로 나는 약간의 그라디언트가 잘 보이도록 텍스트를 갖고 싶습니다.

Answer 1

규칙 끝에 inset과 함께 text-shadow css 속성을 사용하십시오. 이것은 가장 브라우저 간 방법입니다. IE9는 그것을 지원하지 않을 수도 있지만 그게 전부입니다.

는

사용 RGBA의 큰 제어를위한 색상과 (방화 등) 브라우저에서 알파 채널을 편집

Answer 2

소스 : http://css-tricks.com/snippets/css/gradient-text/

이는 웹킷은, 그러나 그것을 달성하기 위해 가장 깨끗한 방법입니다 텍스트는 편집 및 선택 가능한 웹 텍스트로 유지됩니다.

h1 { 
    font-size: 72px; 
    background: -webkit-linear-gradient(#eee, #333); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}