2017-01-28 43 views
0

我有一个简单的HTML页面。我想制作页面渐变的背景。我已经编写了下面的代码,但不是从页面顶部到页面底部创建从黑色到白色的单个渐变,浏览器(镶边)正在创建渐变的多个小重复模式。我究竟做错了什么?html中的线性渐变不覆盖整个页面

<!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> 
+0

刚发现答案已经在这里提供-http://stackoverflow.com/questions/16841323/making-gradient-background-fill-page-with-css –

回答

0

add body, html: height: 100%; - 这横跨整个窗口高度身体。

0

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

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