我有这个渐变背景,但我不希望它重复它填充页面的方式,我希望它是一个填充页面的大梯度.
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, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}
Tec*_*man 63
截至今天,以上都没有奏效.线性梯度正在重复.
要在整个页面上拉伸渐变,您必须在css中添加它:
body {
background: linear-gradient(to left top, blue, red) fixed;
}
就这样.
adr*_*ift 45
要使渐变填充视口,请为<html>元素指定100%的高度:小提琴
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, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}
要防止渐变重复超过视口的可见部分(假设有滚动条),请替换height: 100%;为min-height: 100%;.
asw*_*zen 11
遇到同样的问题，但只有这个有效，请添加此样式
background-attachment: fixed;
background-attachment 属性设置背景图像是与页面的其余部分一起滚动还是固定。共有三个值：scroll、fixed和local。
我同意Adrift的观点，增加高度：将100％添加到html标签将拉伸渐变。您也可以删除background-size：封面。这也适用：
html {
height: 100%;
}
body {
width: 100%;
background: linear-gradient(to left top, blue, red);
}
您应该能够为其他浏览器添加其余的线性渐变，而不会出现任何问题。希望这可以帮助！