CSS Gradient Text issue

I'm trying to replicate this: http://webdesignerwall.com/tutorials/css-gradient-text-effect however I can't seem to get it to work, although I've used the same code..

This is my HTML:

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

And 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;
}

And this is what happens:

Any 开发者_运维百科help would be great! Thanks.

The problem is with your "gradient image".

You're supposed to use a gradient containing only the same colour as the background, but with the opacity of the gradient starting at around 0% and ending at around 100% (your choice exactly what numbers).

I've loaded the demo image into Photoshop, and made it wider so you can see what it should look like in Photoshop:

ehmm...your text is outside the span?

And besides that, the gradient they use is a white gradient on a white background. You are using a black gradient on a white background :) Might be the difference

You should make your gradient file use the same color as the background of your page as the 'paint' and keep the rest transparent