CSS3渐变 - 灰色而不是白色答案

【问题标题】：CSS3 Gradient - grey instead of whiteCSS3渐变 - 灰色而不是白色
【发布时间】：2011-07-09 17:37:25
【问题描述】：

我看到Chris Coyier here 的great example 有一个阅读更多 按钮。我的尝试是，使用这个例子来实现从白色到透明文本的简单淡出，但我只有一个灰色渐变。

此处为示例：http://jsfiddle.net/9adZ3/

请大家告诉我如何解决这个问题，谢谢。

【问题讨论】：

标签： google-chrome css gradient

【解决方案1】：

正如 Chris Coyier 本人在您链接的文章末尾提到的那样，关键字透明实际上是 rgba(0,0,0,0)，所以它是透明黑色。当您创建从白色到透明黑色的渐变时，结果为灰色。

你必须从白色过渡到 rgba(255,255,255,0)，它是透明的白色。

http://jsfiddle.net/FnfTA/

【讨论】：

这是我从未想过的事情，但在使用无头版本的 Chromium 打印到 PDF 时发现它很重要。透明到白色的渐变会在白色背景上呈现灰色，直到我将 transparent 替换为 rgba(255,255,255,0)

【解决方案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/

【讨论】：