一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
<style type="text/css">
#web_bg {
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
min- 1000px;
z-index: -10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<div class="wrapper">
<button type="button" onclick="threeFn()">123</button>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<!--背景图片-->
<div id="web_bg" style="background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597210180356&di=bd246e9fd01f41ed4729f734e0c9339c&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191006%2F19%2F1570360737-HvGOTkxnum.jpg);"></div>
<!--其他代码 ... -->
</div>
<script type="text/javascript">
function threeFn(){
document.getElementById('web_bg').style.background = "url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597210877765&di=a32af22f6d0ba18f014391685757c520&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg"
}
</script>
</body>
</html>