方法一：
先上个效果图
html页面：一个用来放背景图的容器.bg
<body>
<div class="main">
<div class="bg"></div>
</div>
<script>
style样式：.bg的样式
<style>
body{ margin:0; padding:0; } div.bg{ /*方法一*/
position:fixed; top:0; left:0; /*以上三句是让整个span放在屏幕的最左上方*/
width:100%; height:100%; /*以上两句实现全屏大小*/
background:url('img/banner01.jpg') no-repeat center 0;/*引入背景图，不重复出现*/
background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/
} </style>
方法二：
这个显示简直完美！
style样式如下：
<style>
body{ margin:0; padding:0; } div.bg{ width: 100%; height:100vh; background:url("img/banner01.jpg") no-repeat ; background-size:100% 100%; /*随着原始比例缩放*/
} </style>
注：vh:表示显示窗口的高度，设置了100vh后，div.bg的高度会随着窗口的大小改变儿变化；
