Question

我正在开发一个项目，我必须将线性渐变应用于页面主体。渐变只是没有出现在页面上。

我首先认为问题是我的代码中的错误（尽管浏览器没有检测到语法错误），但它对文档或梯度生成器的代码示例都不起作用。这是我的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，我有这个：

firebug

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

Answer 1

我注意到如果margin为0，则在身体上设置渐变。

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

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

html
{
    height:100%;
}

Answer 2

显然你提供的代码正在运作，正如@NathanLee所说。但问题出在您的浏览器上。因此，请确保您的浏览器支持渐变

Answer 3

我遇到过类似的事情。看来我背景上也有渐变。

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

似乎同时具有此渐变和按钮渐变意味着按钮丢失。我还在试图弄清楚如何修复它，所以两者都表现得很好。

CSS Gradient不会出现

3 个答案: