开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情
昨天记录了如何用css样式设置整个页面背景，今天研究一下有关页面背景的大小。
继续使用昨天的雪花图片做背景用。
页面背景大小
设置了页面背景为四朵雪花之后，希望这个背景不是占满全屏的，只想占
宽100px、高100px，这个时候就需要用到属性background-size,当属性值写成像素大小的时候是必须要带单位px的（先书写宽度像素后书写高度像素，中间用空格隔开），否则不会显示这个样式。
background-size的属性值还可以书写为百分比的样式,这个百分比是相对于选择器宽高的,同样是先书写宽度属性,再书写高度属性。(一般不推荐使用这个写法，会得到下图样式)在只书写宽度的百分比时可以自动匹配到高度的百分比，因此，这样书写也能得到合适的页面效果。
background-size还有两个属性值
cover：这个属性值会将背景图片的宽高等比例放大以适应选择器的宽高，有可能会导致原有的背景图片不能完全展示（原来背景图是有四朵雪花的，等比例放大之后只有两朵雪花了），而且背景图的画质也会变模糊。
缩放浏览器页面大小只改变文本内容大小，页面背景依旧是缺失模糊的。
contain:使用这个属性值的时候会有两种结果。
第一种，只设置了背景图片和页面背景大小的contain属性值。页面北京会展示成有四朵雪花的一张小图片铺满整个屏幕的背景样式。此时在浏览器页面进行放大和缩小的操作，会有下图效果
基础的四朵雪花背景图大小会随着浏览器页面缩放而改变大小，最终还是会实现平铺满整个选择器大小。
第二种，增加一个声明：background-repeat: no-repeat;
不论浏览器页面如何缩放，四朵雪花的背景图都不能占满整个选择器大小。
本文提到的所有选择器都是 body 可以在下方码上掘金中修改内容查看不同效果之间运行结果的差异。
