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.我很感激任何建议.

Answer 1

尝试设置背景<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;
}