CSS Background-Size 属性小记

今天在研究用 CSS 实现背景图片铺满浏览器窗口的方法，先是在 StackOverflow 上找到一个方法 show full height background image 来实现背景图填满浏览器高度的需求，但是效果并不好，窗口底部会有一块空白区域，并且右侧有滚动条，在前端群里讨论了一番之后，发现用 background-size: cover; 语句即可解决该问题。在 W3Schools 上查看了一下该属性的说明，在 Background-Size Property Values 这个页面中，可以查看不同属性值会有什么样的表现，整理如下：

属性值	表现方式
auto	背景图的原始尺寸
initial	背景图的原始尺寸
*px *px	指定的尺寸
*px	指定的宽度，并保持图片原始高宽比
100% 100%	撑满填充区域的宽和高
X%	相对于填充区域的宽度比例，并保持图片原始高宽比
cover	撑满填充区域的宽度，并保持图片原始高宽比
contain	撑满填充区域的高度，并保持图片原始高宽比

对比上面表格中的几种属性，可以发现 100% 和 cover 两种属性实现的效果是一样的，auto 和 initial 实现的效果是一样的。

最后为了实现背景图片铺满浏览器窗口的需求，将背景图裁剪成了 16:10 的比例，并且用 cover 属性，这样就可以满足大部分的应用场景了。