背景 实现可以兼容所有浏览器的渐变背景

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啦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容