CSS3 Градиент - серый вместо белого

Question

Я видел отличный пример из Крис Койер здесь для кнопки Подробнее .Я попытался использовать этот пример для простого перехода от белого к прозрачному тексту, но у меня только серый градиент.

Пример здесь: http://jsfiddle.net/9adZ3/

Итак, ребятапожалуйста, скажите мне, как это исправить, спасибо.

Answer 1

Как сам Крис Койер упоминает в конце статьи, на которую вы ссылаетесь, прозрачное ключевое слово - это действительно rgba (0,0,0,0), то есть прозрачный черный. При создании градиента от белого к прозрачному черному результат будет серым.

Вы должны перейти от белого к rgba (255,255,255,0), который является прозрачным белым.

http://jsfiddle.net/FnfTA/

Answer 2

#fade {
    width: 50px;
    height: 25px;
    margin: 0 0 0 -50px;

    //for mozilla based
    background-image:-moz-linear-gradient(center bottom , #ebebeb, #999999);

    //for chrome based
    background: #F6F6F6 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#ebebeb));  

    // for IE
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999',endColorstr='#ebebeb');
}

http://jsfiddle.net/9adZ3/2/