本文已参与「新人创作礼」活动,一起开启掘金创作之路。
在网页中背景图是不可缺少的，无论是整体网页还是局部。熟悉前端的朋友都知道有个css属性叫background，用它可以指定一个图片作为背景。这个属性有很多参数。
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
上面图我们重点关注background-size，它是管理图片大小的。看下它的介绍：
语法
background-size: length|percentage|cover|contain;
值 描述 length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
大家都会注意到cover，英文覆盖的意思，可是试过的人都会发现它并不能达到预期效果，图片很大的话只有一部分看得到，我们需要的是全部平铺就像我们windows电脑桌面有一种模式平铺那样的效果。
刚开始想纯粹靠css来实现行不通了，可是网上找了很多资料经过测试发现都不可以。要么是图片只显示一部分，要么就是网页窗口变动时无法做出相应的改变。 看样子还得依靠传统的办法，用js直接上，简单暴力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
<title>js实现body背景图自动扩缩</title>
</head>
<style>
* {
margin: 0px 0px;
padding: 0px 0px;
}
body {
background: url("images/bg1.png") no-repeat;
background-size: 100% 100%;
}
</style>
<body>
</body>
<script>
$(window).bind("resize load", function() {
$("body").css("height", $(window).height());
});
</script>
</html>
拉长
原图
