CSS渐变不出现答案

【问题标题】：CSS Gradient doesn't appearCSS渐变不出现
【发布时间】：2013-12-10 09:49:26
【问题描述】：

我正在做一个项目，我必须将线性渐变应用到页面正文。渐变只是没有出现在页面上。

我首先认为问题是我的代码中的错误（尽管浏览器没有检测到语法错误），但它不适用于文档或梯度生成器中的代码示例。这是我现在的 CSS 代码（由生成器提供）：

body
{
    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
}

而且...身体背景是不可见的。问题不是来自 html 代码，因为当我通过以下方式更改 CSS 时：

body
{
    background: #ff0000;
}

或者使用背景图像它可以工作...... 当然，我在不同的机器上尝试过，使用不同的浏览器，从最新到旧，但都没有工作。我真的不知道发生了什么，但这让我发疯：除了渐变，一切正常，错误控制台没有显示任何错误；我想我已经尝试了我知道的任何事情，但我仍然卡住了。感谢您的帮助。

编辑：

这是完整的代码：

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>test</p>
    </body>
</html>

style.css

body
{
    margin: 0;
    padding: 0;
    font: 15px/1.5 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4E443C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);

    background: #c5deea; /* Old browsers */
    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
    background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */

}

它在 Firefox 25.0.1 中的显示方式：

编辑 2：

在 Firebug 中，我有这个：

这意味着渐变是由浏览器计算的……但显然没有渲染……

【问题讨论】：

网页开发永远不会出错
它的工作 jsfiddle.net/kpAFL - @ibi0tux
您是否有任何其他 css 样式表附加到此？如果能提供网站链接就好了。
对不起，网站还没上线，没有其他样式表
检查萤火虫，看看你是否覆盖了身体风格。你也可以发布你的css样式到body是如何呈现的，比如Firefox

标签： html css gradient linear-gradients

【解决方案1】：

我注意到，如果 margin 为 0，则在 body 上设置渐变不起作用。

body
{
    margin:0;
    background:linear-gradient(45deg,red,blue);
}

但是，在 html 上设置 height:100% 可以使其正确呈现。希望对您有所帮助。

html
{
    height:100%;
}

【讨论】：

3 年零 2 个月后......幸运的是我不再坚持这个，但谢谢你的回答！ :D
哈哈是的，我在回答后注意到了帖子的年龄，但认为其他人可能需要它！

【解决方案2】：

显然，正如@NathanLee 所说，您提供的代码正在运行。但是，问题在于您的浏览器。所以请确保您的浏览器支持渐变

【讨论】：

我在 Firefox 25、Firefox 3.6（旧语法）和 Safari 下试过，没有成功……我不明白。

【解决方案3】：

我也遇到过类似的事情。好像我的背景也有渐变。

html
{
    background: linear-gradient(rgb(36, 36, 36), rgb(82, 82, 82));
}

似乎同时具有此渐变和按钮渐变意味着按钮丢失。我仍在试图弄清楚如何解决它，以便两者都能正常工作。

【讨论】：