使渐变背景填充页与css | 使渐变背景填充页与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);
}
http://jsfiddle.net/F7vf9/
 解决方案 
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！