CSS渐变文字问题

Question

我试图复制此：http://webdesignerwall.com/tutorials/css-gradient-text-effect但是我似乎无法得到它的工作，虽然我使用相同的代码..

这是我的HTML：

<h1><span></span>Sign Up</h1> 

和CSS：

h1 { 
font-family: arial; 
font-weight: bold; 
font-size: 24px; 
position: relative; 
color: #a2a2a2; 
} 

h1 span { 
background: url(gradient.png) repeat-x scroll 0 0 transparent; 
opacity: 1; 
position: absolute; 
display: block; 
margin-top: 2px; 
width: 100%; 
height: 21px; 
} 

这是发生了什么：

The Problem http://i52.tinypic.com/141t63d.png

任何帮助将是伟大的！谢谢。

Answer 1

问题出在您的“渐变图像”上。

您应该使用仅包含与背景相同颜色的渐变，但渐变的不透明度从0％左右开始，到100％左右（您的选择恰好是几个数字）。

我已经加载了demo image到Photoshop，并使其更广泛的，所以你可以看到它应该是什么样子在Photoshop：

Answer 2

ehmm ...您的文本超出范围？

除此之外，他们使用的渐变是白色背景上的白色渐变。您在白色背景上使用黑色渐变:)可能是差异

Answer 3

你应该让你的渐变文件中使用相同的颜色作为你的页面的背景作为'油漆'，并保持透明