Проблема градиента текста в 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;
}

И вот что происходит:

Проблема http://i52.tinypic.com/141t63d.png

Любая помощь будет отличной! Спасибо.

Answer 1

Проблема с вашим "градиентным изображением".

Вы должны использовать градиент, содержащий только тот же цвет, что и фон, но с непрозрачностью градиента, начиная с 0% и заканчиваяпримерно на 100% (ваш выбор именно того, какие цифры).

Я загрузил демонстрационное изображение в Photoshop и расширил его, чтобы вы могли видеть, как оно должно выглядеть в фотошопе :

Answer 2

Вы должны сделать так, чтобы ваш файл градиента использовал тот же цвет, что и фон вашей страницы, как «рисование», а остальное оставалось прозрачным

Answer 3

ммм ... ваш текст находится за пределами интервала?

И кроме того, используемый ими градиент - это белый градиент на белом фоне.Вы используете черный градиент на белом фоне :) Может быть, разница