css - CSS背景从上到下线性渐变

Question

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

我想要的渐变！

不幸的是，我得到的是：

我得到的渐变

以下是我的 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度渐变

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

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

score 23 · Accepted Answer

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

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

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

编辑

fr13d 在评论中指出，当将渐变放在渐变上时html，在任何滚动之前，渐变将停在第一页的底部。也就是说，当您滚动时，渐变会被切断（如果背景颜色与渐变的较低颜色不同，则值得注意）。

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

尝试这个：

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

body {
    height: 0%;
}

score 1 · Accepted Answer

One way is to give the <body> and <html> elements an explicit height as the former has none, nor any content:

4 回答 4