未覆盖整个页面的html中的线性梯度

Question

我有一个简单的HTML页面。我想使页面渐变的背景。我写了以下代码，但浏览器(chrome)不是创建从页面顶部到页面底部的从黑到白的单一渐变，而是创建多个小的重复渐变图案。我做错了什么？

<!DOCTYPE html>
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>HTML Test</title>
    <style type="text/css" media="screen">
        body{
        background-color:#000000;
        background-image:linear-gradient(#000000,#ffffff);
        }
    </style>
</head>
<body>


</body>
</html>

Answer 1

add body, html: height: 100%; -这将跨越整个窗口高度。

Answer 2

需要指定的身体高度或需要一些虚拟内容。那么你的代码就可以正常工作了。

<style type="text/css" media="screen">
    body{
    background-color:#000000;
    background-image:linear-gradient(#000000,#ffffff);
    height:700px;
    }
</style>