CSS背景从上到下线性渐变答案

【问题标题】：CSS Background Linear Gradient from Top to BottomCSS背景从上到下线性渐变
【发布时间】：2013-06-18 22:09:45
【问题描述】：

我正在尝试创建一个从上到下的线性渐变，例如：

不幸的是，我得到的是：

以下是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
        Hi
</body>
</html>

还有我的 CSS：

body{
  background: linear-gradient(0deg, white, blue 80%) ;
}

如果我使用90deg，而不是0deg，那么我会得到这个：

我需要这个渐变 - 但它应该旋转 90 度，即从上到下而不是从左到右。我很好奇为什么 0deg 似乎给出了类似于重复渐变的东西。

我使用过浏览器，Firefox 21 和 Chrome 27。如果您有任何建议，我将不胜感激。

【问题讨论】：

标签： css

【解决方案1】：

尝试在 <html> 上设置背景 - 可能更易于管理。然后给它一个height:100%;，这样它肯定会扩展整个页面。

我还将它设置为no-repeat，这样当你有更长的内容时，你只会得到一个渐变而不是从底部开始。

html{
    height:100%;
    background: linear-gradient(0deg, white, blue 80%) no-repeat;
}

编辑

fr13d 在 cmets 中指出，当将渐变放在 html 上时，渐变将在任何滚动之前停止在第一页的底部。也就是说，当您滚动时，渐变会被切断（如果背景颜色与渐变的下部颜色不同，则会很明显）。

解决此问题的一种方法是将样式改为 body：

body{
    height:100%;
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}

【讨论】：

有点晚了，但是如果您的<body> 包含足够的内容以超出屏幕底部，那么一旦您向下滚动，srcolls 进入视图的新部分就没有背景了。（由于渐变的底部是白色的，这对您来说无关紧要。）
正确@DACrosby。只是为了任何其他寻求灵魂的利益而明确地说出来：如果您的渐变的较低颜色不是默认的白色，您现在可以将 html background-color 设置为渐变的较低颜色。通过这种方式，body 混合直到达到html 颜色，它一直向下走:-)
另外，你可以使用min-height: 100%，至少Chrome会把它扩展过去。

【解决方案2】：

我同意@DACrosby 的解决方案，但建议使用“固定”扩展背景。在这种情况下，您的背景将保持不变，并且您将拥有整个网站的渐变，而不仅仅是在顶部。

background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;

【讨论】：

【解决方案3】：

试试这个：

html {
    height: 100%;
    background: linear-gradient(0deg, white, blue 80%) ;
}

body {
    height: 0%;
}

【讨论】：

【解决方案4】：

一种方法是给 <body> 和 <html> 元素一个明确的高度，因为前者没有，也没有任何内容：

【讨论】：

谢谢随波逐流。这似乎有点工作。如果您在没有html 的情况下执行此操作，即仅使用body，则它不起作用。为什么需要同时指定body 和html？
另外，如果你使用滚动条滚动到底部，它会有一条深蓝色的线。我们能避免这种情况吗？
@O.O：因为<body> 不知道 100% 高度 指的是什么，因为百分比值总是相对于另一个值，例如其父级的高度。