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

嗯......你的文字超出了范围？

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

Answer 2

问题在于你的“渐变图像”。

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

我已将demo image加载到Photoshop中，并使其更宽，以便您可以在Photoshop中看到它应该是什么样的 ：

Answer 3

您应该使渐变文件使用与页面背景相同的颜色作为“绘画”并保持其余部分透明