使渐变背景填充页与css [英] Making gradient background fill page with css
本文介绍了使渐变背景填充页与css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个渐变背景，但我不想让它重复的方式填充页面，我想它是一个大的渐变填充页面。
html：
<！DOCTYPE html&
< head>
< meta charset =UTF-8/>
< title>主页< / title>
< link rel =stylesheettext =text / csshref =css.css>
< / head>
< body>
< / body>
CSS：
code> 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）;
}
解决方案
要让渐变填充视口， < 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）;
}
为了防止渐变重复超过视口的可见部分是滚动条），用 min-height：100％;
height：100％; I have this gradient background but I don't want it to repeat the way it does to fill the page, I want it to be one large gradient that fills the page.
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);
}
解决方案
To have the gradient fill the viewport, give the <html> element a height of 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, 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);
}
To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.
这篇关于使渐变背景填充页与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
