摘要：最后为了实现背景图片铺满浏览器窗口的需求，将背景图裁剪成了的比例，并且用属性，这样就可以满足大部分的应用场景了。
今天在研究用 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 属性，这样就可以满足大部分的应用场景了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115280.html
摘要：春节闲来无事，看看自己在上写的文章，想不到已经篇了，各方面的都有，那就分类整理一下吧，也方便自己和别人查看。 春节闲来无事，看看自己在SegmentFault上写的文章，想不到已经20篇了，各方面的都有，那就分类整理一下吧，也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中（...
摘要：高性能动画与端场景需要相比，移动端需要考虑的因素也相对复杂，重点考虑流量功耗与流畅度。而在移动端，我们选择性能更优浏览器原生实现方案动画。然而，动画在移动多终端设备场景下，相比会面对更多的性能问题，主要体现在动画的卡顿与闪烁。1.高性能CSS3动画 与PC端场景需要相比，移动web端需要考虑的因素也相对复杂，重点考虑：流量、功耗与流畅度。在pc端上考虑更多的是流畅度，而mobile web中...
阅读 3090·2021-11-23 09:51
阅读 2542·2021-10-28 09:33
阅读 3286·2021-10-12 10:12
阅读 592·2021-10-08 10:04
阅读 3357·2021-09-22 15:13
阅读 829·2019-08-30 15:55
阅读 2783·2019-08-30 15:44
阅读 400·2019-08-30 13:04
