Question

我试图从上到下创建一个线性渐变，如：

Gradient I want!

不幸的是，我得到的是：

Gradient I get

以下是我的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，那么我就明白了：

Gradient with 90deg

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

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

Answer 1

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

我还将其设置为no-repeat，因此当您的内容较长时，您只能获得一个渐变，而不是从底部开始。

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

http://jsfiddle.net/daCrosby/nEQeZ/1/

修改

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

另一种方法是将样式放在body上：

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

http://jsfiddle.net/daCrosby/nEQeZ/117/

Answer 2

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

http://jsfiddle.net/qL9mg/1/

Answer 3

试试这个：

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

body {
    height: 0%;
}

Answer 4

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

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

CSS背景线性渐变从上到下

4 个答案: