CSS3 텍스트 그라디언트가 작동하지 않습니까?

-1

일부 텍스트에는 순수한 CSS3 그라디언트 (이미지 없음 등)를 적용하려고하지만 텍스트는 변경되지 않습니다.CSS3 텍스트 그라디언트가 작동하지 않습니까?

내 현재 코드는 다음과 같습니다

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Text Gradients</title> 
    <style> 
    /* The gradient class */ 
    .gradient { 
     -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1))); 
    } 
    </style> 
</head> 
<body> 
    <!--The text with the gradient--> 
    <h1 class="gradient"> Hello World </h1> 
</body> 
</html>

출처

2012-08-23 Downgoat

이 CSS3 그라데이션 생성기를 사용해보십시오 : HTTP : // www.colorzilla.com/gradient-editor/ – Lowkase

어떤 브라우저를 사용하고 있습니까? –

내가 사용하는 크롬에서 그라데이션 텍스트를 생산할 수 있었다 :

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

출처

2012-08-23 18:09:15

감사합니다. – Downgoat

만 웹킷 사용자를 위해 작동합니다. 모든 브라우저를 지원하려면 최소한 :

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

색상 값을 원하는 값으로 변경하십시오.

편집 : @ Lokase에 따르면 : 당신은 또한 그가/그녀의 의견에 링크 된 발전기를 사용할 수 있습니다.

출처

2012-08-23 18:03:45 Silox

나는이 site를 추천 할 것입니다,이

background-image: linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%); 
background-image: -o-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%); 
background-image: -moz-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%); 
background-image: -webkit-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%); 
background-image: -ms-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.22, rgb(93,245,172)), 
    color-stop(0.61, rgb(121,255,207)), 
    color-stop(0.81, rgb(158,255,249)) 
);

는 또한 css3pie를 사용해보십시오 모든 현대적인 브라우저에서 작동합니다, 그것은 당신이 IE 브라우저에서 작동하게 몇 가지 코드를 추가 할 수 있습니다.

출처

2012-08-23 18:05:20 Undefined

많은 CSS3를 사용하는 경우 -prefix-free을 사용하는 것이 좋습니다. 이렇게하면 모든 브라우저 접두사를 건너 뛸 수 있으며 라이브러리는 런타임에 필요한 모든 접두사를 추가합니다.

당신이 그것을 사용하는 경우 귀하의 스타일과 같을 것이다 :

.gradient { 
     mask-image: gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1))); 
    }

출처

2012-08-23 18:08:48

+1 보통 그라디언트를 생성하지만 CSS를 사용하면 CSS가 훨씬 멋지고 멋진 추상화가됩니다 (이 도구에 추가하는 것이 모든 그라디언트에서 돌아가고 나타나는 모든 새 브라우저에서 다시 생성하는 것이 더 쉽다는 것을 이미지로 나타냅니다) :) – PJUK

CSS3 텍스트 그라디언트가 작동하지 않습니까?

답변

관련 문제