CSS 背景线性渐变从上到下

Question

18

我试图创建一个从顶部到底部的线性渐变，如下所示：

我想要的渐变效果！

但是我得到的结果是：

我得到的渐变效果

以下是我的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浏览器。我将非常感谢任何建议。

- O.O.

你的身体计算出的高度是多少？尝试将CSS body设置为100%高度。 - jtheman

4个回答

4

我同意@DACrosby提出的解决方案，但建议使用'fixed'来扩展背景。这样，您的背景将保持原位，并且整个网站都将使用渐变，而不仅仅是顶部。

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

- WebWorker

2

试试这个：

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

body {
    height: 0%;
}

- teteArg

2

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

- Adrift

谢谢 Adrift。这似乎有点起作用。如果你不使用 html，即只使用 body，那么它就不起作用。为什么需要同时指定 body 和 html？ - O.O.

另外，如果您使用滚动条向下滚动到底部，它会出现一条深蓝色的线。我们能避免这种情况吗？ - O.O.

1

@O.O：因为<body>不知道100%高度是指什么，因为百分比值总是相对于另一个值，例如其父元素的高度。 - Adrift

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DACrosby · Accepted Answer

尝试将背景设置在 <html> 上，这样可能更容易管理。然后也将其设置为 height:100%;，以确保它扩展到整个页面。

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

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

编辑

评论中提到，在将渐变放在html上时，渐变会停在第一页的底部，而不是任何滚动之前。也就是说，当您滚动时，渐变被截断（如果背景颜色与渐变的下部颜色不同，则容易注意到这一点）。

解决此问题的一种方法是将样式放在body上：

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