我有这个渐变背景，但我不希望它重复填充页面的方式，我希望它是一个大的渐变填充页面。
HTML：
<!DOCTYPE html>
<head>
<Meta charset = "UTF-8"/>
<title>Home</title>
<link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
</body>
CSS：
p {
font-family:"Arial Black";
line-height:120%;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top,blue,red);
background: -moz-linear-gradient( to left top,red);
background: -ms-linear-gradient( to left top,red);
background: -o-linear-gradient( to left top,red);
background: linear-gradient( to left top,red);
}
解决方法
要使渐变填充视口，请将< html>元素的高度为100％：
fiddle
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top,red);
}
为了防止渐变重复通过视口的可见部分(假设有滚动条)，请替换height：100％;最小高度：100％;
