1.代码
<!-- 参考：http://www.runoob.com/css3/css3-gradients.html -->
<html>
<head>
<meta charset="utf-8" />
<style>
*{
padding:0;
margin:0;
}
.gradient {
width: 100%;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
}
.box{
height:1200px;
}
</style>
</head>
<body>
<div class="gradient">
<div class="box"></div>
</div>
</body>
</html>
2.遇到的问题
设置背景大小时，不能设置为height:100%
如果设置height:100%，会出现如下问题：
（1）. 对于IE10以下的浏览器，height:100%对于浏览器完全没有作用，相当于没有设置高度
image.png
（2）.对于其他浏览器，一旦内部元素的高度超过了100%（浏览器不产生滚动条的高度），就会出现背景不能全覆盖浏览器的问题。
image.png
解决办法：
1.不设置背景div的高度，直接用内部元素撑起div
2.如果不想有滚动条的话，就设置body的宽度为100%，而不需要.gradient啦
网友评论