渐变背景在带有-webkit-gradient的Chrome中不起作用答案

【问题标题】：gradient background not working in Chrome with -webkit-gradient渐变背景在带有-webkit-gradient的Chrome中不起作用
【发布时间】：2011-05-28 13:33:47
【问题描述】：

大家好，

我正在使用带有 -webkit-gradient 的渐变背景。它不能在 Windows 7 上的 Chrome 8.0.552.224 上运行，但我可以发誓它最近在 Chrome-OS X 上运行。现在是星期一，所以也许我遗漏了一些明显的东西，但如果是这样，我无法弄清楚。我会很感激你看看。此处的示例代码适用于 Firefox，但在 Chrome 中不显示渐变：

谢谢， -诺斯克

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Gradient test </title>
    <style>
        .main-header
        {
            padding-top: 50px;
            min-height: 50px;
            background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
            background: -moz-linear-gradient(top, #fff, #000);
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="main-header">
        THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
    </div>
</body>
</html>

【问题讨论】：

标签： google-chrome webkit gradient

【解决方案1】：

看来我只是语法错误。应该是这样的：

   background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));

【讨论】：

-webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE)) 有类似的问题。修复感谢您的帖子

【解决方案2】：

请注意，Chrome 16.0.912.75m 在解析样式时仍然存在一个小的 CSS 错误/问题：

background:-webkit-linear-gradient  (top,gray 0,#A0A0A0 100%);

这不起作用，因为 -webkit-linear-gradient 和开始括号之间有空格。删除额外的空格将解决问题并缩小 CSS。

【讨论】：

【解决方案3】：

试试这个

background: -webkit-linear-gradient(#DDDDDD, #ffffff);

【讨论】：