今天在研究用 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 属性，这样就可以满足大部分的应用场景了。
